2013-05-30 15 views
7

Chcę, aby mój znacznik został podkreślony po najechaniu myszą, a ja używam tego kodu, ale nie ma podkreślenia po najechaniu myszą.Znacznik podkreślenia <a> podkreślenia po najechaniu myszą

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 

    a.hover:hover {text-decoration: underline;} 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <a class="hover" style=" text-decoration:none; color:red" href="">Site Map</a> 

    </div> 
    </form> 
</body> 
</html> 

to:

a:hover {text-decoration: underline;} 
<a style=" text-decoration:none; color:red" href="">Site Map</a> 

nie działa albo.

co powinienem zrobić? Na czym polega problem?

Z góry dziękuję.

Odpowiedz

20

Atrybut style jest bardziej specific niż jakikolwiek inny selektor, więc zawsze będzie stosowany jako ostatni w kaskadzie (straszne reguły nieodrzucone). Przenieś CSS do arkusza stylów.

a.hover { 
    color: red; 
    text-decoration: none; 
} 

a.hover:hover { 
    text-decoration: underline; 
} 

(Proponuję również bardziej semantyczną nazwę dla klasy).

3

Styl śródliniowy zastępuje styl na stronie.

Usuń styl inline i wykorzystuje to:

<style type="text/css"> 
    a {text-decoration: none;} 
    a:hover {text-decoration: underline;} 
</style> 

doradzi także, aby nie używać <style>, korzysta z zewnętrznego pliku css. Znacznie ułatwi konserwację.

+0

domyślne zachowanie jest podkreślanie wszystkich linków przez cały czas. – Quentin

0

po użyciu hover nie można używać stylów wbudowanych. musisz napisać tak:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<style type="text/css"> 

a.hover 
{ 
    text-decoration: none; 
    color:red 
} 

a.hover:hover 
{ 
    text-decoration: underline; 
    } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<a class="hover" href="">Site Map</a> 

</div> 
</form> 
</body> 
</html> 
+0

testowałem i działało – MjeOsX

-1

To będzie działać dla Ciebie.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>ABC</title> 
    <style type="text/css"> 
     a.hover {text-decoration: none; color: red;} 
     a.hover:hover {text-decoration: underline;} 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <a class="hover" href="">Site Map</a> 
     </div> 
    </form> 
</body> 
</html> 

Dowiedz się więcej o specyfikacji css.

1

myślę, że trzeba napisać kod jak: (Demo here: http://jsfiddle.net/BH7YH/)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
      a {text-decoration: none; color:red} 
      a:hover {text-decoration: underline;} 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
    <a class="hover" href="">Site Map</a> 

    </div> 
    </form> 
</body> 
</html> 
-2

W przypadku kodu CSS nie działa można użyć poniższy kod HTML, który może pomóc

<html> 
<body> 
<a href="" style="text-decoration:underline-on-hover"> </a> 
</body> 
</html> 
+0

Nie, nie będzie. 'underline-on-hover' nie jest poprawną wartością właściwości' text-decoration'. – Quentin