À l'aide de CSS: changer une div de la couleur d'arrière-plan sur le vol stationnaire

J'ai un div qui est un lien vers une autre page. Quand quelqu'un passe sur la div(ie, lien) je veux que l'ensemble de la div de la couleur d'arrière-plan de bleu. Je voudrais faire cela en CSS parce que le javascript ne fonctionne pas avec tout le monde.

Mon Problème: Mon code ci-dessous tente de le faire, le lien fonctionne bien, MAIS quand j'ai passez la souris sur la div le fond ne change pas de couleur. Que pensez-vous que je fais de mal & comment pensez-vous que je peux résoudre ce problème pour faire de la div changement de couleur d'arrière-plan sur le vol stationnaire?

J'ai le sentiment que je dois placer le lien(un élément) à l'intérieur de la div(au lieu de l'extérieur) mais je ne peux jamais obtenir l'un pour l'étirer à la totalité de l'espace de la div de cette façon.

<html>
<head>
    <style type="text/css">
    <!--
        body        { background-color: RGB(218,238,248); }
        #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                      border-width:thin; border-style:solid; border-right-width:thick;
                      border-bottom-width:thick; background-color: #FFFFFF; width: 300px; }

        /* Using pure CSS I am trying to make the background color of the div renatalAnnc have a blue background when we hover over it*/
        .sidebarLink { color: #000000; text-decoration: none; }
        .sidebarLink a:hover { background-color: blue; }

        /* The following on works in Firefox not IE! :( #rentalAnnc:hover { background-color: blue; } */
    -->
    </style>
</head>
<body>

    <a class="sidebarLink" href="facilitiesForHire.html">
        <div id="rentalAnnc">
            <p>We have a range of Education Facilities available for lease & hire</p>
        </div>
    </a>

</body>
</html>

Un <div> dans <a> n'est pas valide HTML. Si le comportement du navigateur est en aucune façon indéterminée/unstandard. validator.w3.org.
HTML5 permet <div> dans <a>.
est: est-ce donc? Je suis en retard sur le temps.
Oui, vérifier le validateur qui BalusC liés (juste être sûr de spécifier HTML5 dans les options). Bien sûr, en supposant que les navigateurs comprendre HTML5 est une proposition risquée.
L'OP n'a pas montré un document HTML5. C'est un doctypeless document.
est-il normal d'avoir une ul, ol ou p à l'intérieur d'un <a> élément? Se référant à HTML4 & moins
Devrait également préciser la version de IE, comme toujours.
demandez le programme de validation.
Et vous n'aviez pas droit à votre déclaration de validité. Mais il n'y a pas besoin de cela pour obtenir de la petite 🙂

InformationsquelleAutor user593747 | 2011-09-19

css html

Vous devez mettre le <a> à l'intérieur de la <div>. Si vous voulez qu'elle s'étendent à travers la totalité de l'espace, ajouter display: block à son style.

<div id="rentalAnnc">
    <a class="sidebarLink" href="facilitiesForHire.html">
        <p>We have a range of Education Facilities available for lease and hire</p>
    </a>
</div>

a.sidebarLink { color: #000000; text-decoration: none; display: block; }
a.sidebarLink:hover { background-color: blue; }

InformationsquelleAutor Will

3

:hover de soutien n'est pas idéal pour les non-ancrage des éléments dans les navigateurs plus anciens et IE, de sorte que vous pouvez joindre au hover pseudo classe à la <a> au lieu et à l'utilisation d'un simple sélecteur de descendant:
```
a:hover #rentalAnnc { background-color: blue; }
```
- Eh bien, ce fait ne peut pas suffire, il va déclencher sur a:hover, pas spécifiquement sur #rentalAnnc:hover. Donc, si votre <a> élément est plus grand que votre #rentalAnnc, vous n'obtiendrez pas les "décalés" hover effet que la souris se déplace sur l'élément, mais elle permet au moins de travail autour de IE6 et 7 de la sous-normale :hover soutien.
InformationsquelleAutor Wesley Murch
1

Ajouter <!DOCTYPE html> haut de votre page pour en faire un document HTML5 et utiliser les outcommented #rentalAnnc:hover { background-color: blue; } règle. Avoir un <div> à l'intérieur de <a> est pas valide dans HTML3/4, mais apparemment valide en HTML5 (avertissement: la norme HTML5 n'est pas encore définitif). Après avoir ajouté le bon doctype et le outcommented règle, votre problème actuel (et beaucoup d'autres (futurs?) relatives à la présentation des questions) devrait être résolu dans MSIE.

N'oubliez pas de fixer les autres http://validator.w3.org erreurs après l'ajout du doctype, comme un titre manquant et ainsi de suite. Le comportement du navigateur est indéterminé sur le code HTML non valide.

InformationsquelleAutor BalusC

Un peu en retard mais je suis sûr que j'ai regardé récemment et je pense que la meilleure solution est:

<style type="text/css">
    body        { background-color: RGB(218,238,248); }
    #rentalAnnc { margin-top: 5%; border-color: #99CCFF; padding-left: 10px; padding-right: 10px;
                  border-width:thin; border-style:solid; border-right-width:thick;
                  border-bottom-width:thick; width: 300px; }
    a.sidebarLink div { color: #000000; text-decoration: none; background-color: #FFFFFF;}
    a.sidebarLink:hover div { background-color: blue; }
</style>

<a class="sidebarLink" href="facilitiesForHire.html">
    <div id="rentalAnnc">
        <p>We have a range of Education Facilities available for lease & hire</p>
    </div>
</a>

Remarque: le rentalAnnc div n'a pas une couleur d'arrière-plan dans le style. C'est dans le style de lien seulement.

De cette façon, le lien couvre l'ensemble de la div exactement, pas juste une partie. Aussi, tout background-image appliquée à la div (par exemple avec des zones transparentes pour la couleur d'arrière-plan à montrer à travers) sera toujours affiché!

InformationsquelleAutor Mr Rudewords

Vous devez vous connecter pour publier un commentaire.