2013-05-30 14 views
7

Desidero che il mio tag <a> venga sottolineato quando si passa il mouse e io sono utilizzato questo codice, ma non ha sottolineato quando si passa il mouse.sottolineatura <a> tag quando si passa il tempo

<%@ 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> 

questo:

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

non funziona neanche.

cosa devo fare? Qual è il problema?

Grazie in anticipo.

risposta

20

L'attributo style è più specific di qualsiasi selettore, quindi verrà sempre applicato per ultimo nella cascata (le regole orribili !important non sono valide). Sposta il CSS nel foglio di stile.

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

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

(Suggerisco anche un nome più semantico per la classe).

3

Lo stile in linea sovrascrive lo stile sulla pagina.

Rimuovere lo stile in linea e utilizza questo:

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

si consigliano inoltre di non usare <style>, utilizza un file CSS esterno. Faciliterà notevolmente la manutenzione

+0

comportamento predefinito è quello di sottolineare tutti i link tutto il tempo. – Quentin

0

quando si utilizza il passaggio del mouse non è possibile utilizzare gli stili in linea. devi scrivere in questo modo:

<!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

l'ho provato e ha funzionato – MjeOsX

-1

Questo funziona per voi.

<%@ 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> 

Ulteriori informazioni sulla specifica css.

1

Penso che si dovrebbe scrivere codice come: (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

Nel codice CSS caso non funziona è possibile utilizzare seguente codice HTML che può aiutare

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

No, non lo farà. 'underline-on-hover' non è un valore valido per la proprietà' text-decoration'. – Quentin

Problemi correlati