web-dev-qa-db-fra.com

souligner la balise <a> lors du survol

Je veux que ma balise <a> Soit soulignée lorsqu'elle est survolée. J'ai le code suivant, mais cela ne fonctionne pas.

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

Ce:

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

ne fonctionne pas non plus.

Que devrais-je faire? Quel est le problème?

htmlcsshtml5css3tags
9
jal nami

L'attribut style est plus spécifique que n'importe quel sélecteur, il sera donc toujours appliqué en dernier dans la cascade (horrible !important nonobstant les règles). Déplacez le CSS vers la feuille de style.

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

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

(Je suggère également un nom plus sémantique pour la classe).

27
Quentin

Le style en ligne remplace le style sur la page.

Supprimez le style en ligne et utilisez ceci:

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

Vous conseille également de ne pas utiliser <style>, utilise un fichier css externe. Facilitera grandement l'entretien.

3
Shankar Cabus

Je pense que vous devriez écrire du code comme: ( Démo ici: 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>
1
Nguyen Phung Hung

lorsque vous utilisez le survol, vous ne pouvez pas utiliser de styles en ligne. vous devez l'écrire comme ceci:

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