couleur d'arrière-plan div, à modifier en survol
-
21-08-2019 - |
Question
J'essaie de faire un la couleur d'arrière-plan du div change au survol de la souris.
le div {fond: blanc;}
le div a:hover{background:grey;largeur : 100 % ;
bloc de visualisation;décoration de texte : aucune ;}
seulement le lien à l'intérieur du div obtient la couleur d'arrière-plan.
que pourrais-je faire pour que le toute la division obtient cette couleur d'arrière-plan ?
merci
MODIFIER :
comment puis-je faire en sorte que l'ensemble du div agisse comme un lien - lorsque vous cliquez n'importe où sur ce div, pour vous amener à une adresse.
La solution
Le "a:hover
" indique littéralement au navigateur de modifier les propriétés du <a>
-tag, lorsque la souris passe dessus.Ce que vous vouliez peut-être dire, c'était "the div:hover
" à la place, qui se déclencherait lorsque le div serait choisi.
Juste pour être sûr, si vous souhaitez modifier un seul div en particulier, donnez-lui un identifiant ("<div id='something'>
") et utilisez le CSS "#something:hover {...}
" plutôt.Si vous souhaitez modifier un groupe de divs, transformez-les en classe ("<div class='else'>
") et utilisez le CSS ".else {...}
" dans ce cas (notez le point avant le nom de la classe !)
Autres conseils
Utilisation Javascript
<div id="mydiv" style="width:200px;background:white" onmouseover="this.style.background='gray';" onmouseout="this.style.background='white';">
Jack and Jill went up the hill
To fetch a pail of water.
Jack fell down and broke his crown,
And Jill came tumbling after.
</div>
Il n'y a pas besoin de mettre l'ancre. Pour changer le style de div sur le vol stationnaire puis Changer la couleur de fond de div sur le vol stationnaire.
<div class="div_hover"> Change div background color on hover</div>
Dans la page Css
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }
Pour toute la loi div comme un lien, définissez la balise d'ancrage comme:
display: block
Et régler votre hauteur de la balise d'ancrage à 100%. Définissez ensuite une hauteur fixe à votre balise div. puis le style de votre balise d'ancrage comme d'habitude.
Par exemple:
<html>
<head>
<title>DIV Link</title>
<style type="text/css">
.link-container {
border: 1px solid;
width: 50%;
height: 20px;
}
.link-container a {
display: block;
background: #c8c8c8;
height: 100%;
text-align: center;
}
.link-container a:hover {
background: #f8f8f8;
}
</style>
</head>
<body>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
<div class="link-container">
<a href="http://www.stackoverflow.com">Stack Overflow</a>
</div>
</body> </html>
Bonne chance!
code html:
<!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>
Code css:
.nicecolor {
color:red;
width:200px;
height:200px;
}
.nicecolor:hover {
color:blue;
}
et voilà comment vous allez changer votre div du rouge au bleu en pointant dessus.
Set
display: block;
et donner une certaine hauteur
essayez simplement "hover" propriété de CSS. par exemple:
<html>
<head>
<style>
div
{
height:100px;
width:100px;
border:2px solid red;
}
div:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="#">
<div id="ab">
<p> hello there </p>
</div>
</a>
</body>
J'espère que cela vous aidera
Vous pouvez simplement mettre l'ancre autour de la div.
<a class="big-link"><div>this is a div</div></a>
et
a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}
Il suffit de rendre la propriété dans votre fichier !important
css de sorte que la couleur de fond ne change pas sur over.This de souris travaillé pour moi.
Exemple:
.fbColor {
background-color: #3b5998 !important;
color: white;
}