div background color, to change onhover

2019-01-05 02:32发布

站内问答 / HTML/CSS
1791 9 5

I'm trying to make a div's background color change on mouse over.

the div {background:white;}
the div a:hover{background:grey; width:100%;
display:block; text-decoration:none;}

only the link inside the div gets the background color.

what could I do to make the whole div get that background color?

thank you

EDIT :
how can I make the whole div to act as a link - when you click anywhere on that div, to take you to an address.

9条回答
甜甜的少女心
2楼-- · 2019-01-05 03:10

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

查看更多
0人赞 添加讨论(0) 举报
萌系小妹纸
3楼-- · 2019-01-05 03:20

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>
查看更多
0人赞 添加讨论(0) 举报
别忘想泡老子
4楼-- · 2019-01-05 03:25

Set

display: block;

on a and give some height

查看更多
0人赞 添加讨论(0) 举报
我只想做你的唯一
5楼-- · 2019-01-05 03:26

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

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

In .css page

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }
查看更多
0人赞 添加讨论(0) 举报
叛逆
6楼-- · 2019-01-05 03:28

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

查看更多
0人赞 添加讨论(0) 举报
【Aperson】
7楼-- · 2019-01-05 03:32

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.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)