Цвет фона div, чтобы изменить его - PullRequest
Новая
       32

Цвет фона div, чтобы изменить его

84 голосов
/ 24 марта 2009

Я пытаюсь изменить цвет фона div при наведении мыши на .

div {background: white;}
div a: hover {background: grey; ширина: 100%;
Дисплей: блок; текст-отделка: нет;}

только ссылка внутри div получает цвет фона .

что я мог сделать, чтобы целый div получил этот цвет фона?

спасибо

РЕДАКТИРОВАТЬ:
как я могу заставить весь div действовать как ссылка - когда вы щелкаете в любом месте этого div, вы переходите по адресу.

Ответы [ 9 ]

106 голосов
/ 24 марта 2009

«a:hover» буквально говорит браузеру изменить свойства тега <a>, когда на него наведена мышь. Возможно, вы имели в виду "the div:hover" вместо этого, что сработало бы, когда был выбран div.

Просто чтобы убедиться, что если вы хотите изменить только один конкретный div, присвойте ему идентификатор ("<div id='something'>") и используйте вместо него CSS "#something:hover {...}". Если вы хотите отредактировать группу элементов div, превратите их в класс («<div class='else'>») и в этом случае используйте CSS «.else {...}» (обратите внимание на точку перед именем класса!)

40 голосов
/ 24 марта 2009

Использование 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>
20 голосов
/ 12 января 2012

Нет необходимости ставить якорь. Чтобы изменить стиль div при наведении Изменить цвет фона div при наведении курсора. 

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

На странице .css 

.div_hover { background-color: #FFFFFF; }

.div_hover:hover { background-color: #000000; }
16 голосов
/ 24 марта 2009

Чтобы весь div действовал как ссылка, установите тег привязки следующим образом: 

display: block

И установите высоту якорного тега на 100%. Затем установите фиксированную высоту для вашего тега div. Затем примените стиль к своему тегу привязки, как обычно.

Например: 

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

Удачи!

10 голосов
/ 31 мая 2014

HTML-код: 

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

код css: 

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

    .nicecolor:hover {
      color:blue;
     }

и вот как вы измените ваш div с красного на синий, наведя на него курсор.

5 голосов
/ 24 марта 2009

Установить 

display: block;

на a и немного высоты

3 голосов
/ 31 октября 2013

просто попробуйте "hover" свойство CSS. например: 

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

я надеюсь, что это поможет

1 голос
/ 28 января 2011

Вы можете просто поставить якорь вокруг div. 

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

, а затем 

a.big-link {
background-color: 888;
}
a.big-link:hover {
 background-color: f88;
}
0 голосов
/ 28 мая 2018

Просто установите свойство !important в вашем CSS-файле, чтобы цвет фона не изменялся при наведении мыши. Это сработало для меня.

Пример: 

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