div цвет фона, чтобы изменить onhover
Я пытаюсь сделать изменение цвета фона div на мыши над.
div {фон: белый;}
div a: hover{фон: серый; ширина: 100%;
дисплей: блок; текстовое оформление: нет;}
только на ссылке внутри div получает цвет фона.
что я мог сделать весь div получить этот фон цвет?
спасибо
изменить :
как я могу заставить весь div действовать как ссылка - когда вы нажимаете в любом месте этого div, чтобы привести вас к адресу.
9 ответов
в "a:hover
" буквально говорит браузеру изменить свойства для <a>
- тег, когда мышь нависает над ним. Возможно, вы имели в виду:"the div:hover
" вместо этого, который будет срабатывать при выборе div.
чтобы убедиться, что вы хотите изменить только один конкретный div, дайте ему id ("<div id='something'>
") и использовать CSS"#something:hover {...}
" вместо этого. Если вы хотите отредактировать группу divs, сделайте их классом ("<div class='else'>
") и использовать CSS".else {...}
" в этом случае (обратите внимание на точка перед именем класса!)
Использование 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>
нет необходимости ставить якорь. Чтобы изменить стиль div при наведении Изменение цвета фона div при наведении.
<div class="div_hover"> Change div background color on hover</div>
In .страница css
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }
чтобы весь 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>
удачи!
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 с красного на синий, зависнув над ним.
просто попробуйте свойство "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>
надеюсь, это поможет
вы можете просто поставить якорь вокруг 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;
}
просто сделайте свойство !important
в вашем css-файле, чтобы цвет фона не менялся при наведении мыши.Это сработало для меня.
пример:
.fbColor {
background-color: #3b5998 !important;
color: white;
}