Div 背景颜色，以改变悬停

小开

最佳答案

The "a:hover" literally tells the browser to change the properties for the <a>-tag, when the mouse is hovered over it. What you perhaps meant was "the div:hover" instead, which would trigger when the div was chosen.

Just to make sure, if you want to change only one particular div, give it an id ("<div id='something'>") and use the CSS "#something:hover {...}" instead. If you want to edit a group of divs, make them into a class ("<div class='else'>") and use the CSS ".else {...}" in this case (note the period before the class' name!)

小开

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

小开

Set

display: block;

on a and give some height

小开

To make the whole div act as a link, set the anchor tag as:

display: block

And set your height of the anchor tag to 100%. Then set a fixed height to your div tag. Then style your anchor tag like usual.

For example:

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

Good luck!

小开

You can just put the anchor around the div.

<a class="big-link"><div>this is a div</div></a>

and then

a.big-link {
background-color: 888;
}
a.big-link:hover {
background-color: f88;
}

小开

There is no need to put anchor. To change style of div on hover then Change background color of div on hover.

.div_hover {
background-color: #FFFFFF;
}


.div_hover:hover {
background-color: #000000;
}

<div class="div_hover"> Change div background color on hover</div>

小开

simply try "hover" property of CSS. eg:

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

i hope this will help

小开

html code:

    <!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>

css code:

    .nicecolor {
color:red;
width:200px;
height:200px;
}


.nicecolor:hover {
color:blue;
}

and thats how youll change your div from red to blue by hovering over it.

小开

Just make the property !important in your css file so that background color doesnot change on mouse over.This worked for me.

Example:

.fbColor {
background-color: #3b5998 !important;
color: white;
}

小开

you could just contain the div in anchor tag like this:

a{
text-decoration:none;
color:#ffffff;
}
a div{
width:100px;
height:100px;
background:#ff4500;
}
a div:hover{
background:#0078d7;
}

<body>
<a href="http://example.com">
<div>
Hover me
</div>
</a>
</body>