Я пытаюсь изменить цвет фона div при наведении курсора.
div {background: white;}
div a: hover {background: gray; ширина: 100%;
дисплей: блок; украшение текста: нет;}
только ссылка внутри div получает цвет фона.
что я могу сделать, чтобы весь div получил этот цвет фона?
Спасибо
РЕДАКТИРОВАТЬ:
как мне сделать так, чтобы весь div действовал как ссылка - когда вы щелкаете в любом месте этого div, чтобы перейти по адресу.
«a:hover» буквально указывает браузеру изменить свойства тега <a> при наведении на него указателя мыши. Возможно, вы имели в виду «the div:hover», который срабатывает при выборе div.
Просто чтобы убедиться, что если вы хотите изменить только один конкретный div, присвойте ему идентификатор («<div id='something'>») и используйте вместо него CSS «#something:hover {...}». Если вы хотите отредактировать группу div, превратите их в класс ("<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>
На странице .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 с красного на синий, наведя на него курсор.
Установленный
display: block;
на a и задайте высоту
просто попробуйте свойство CSS "hover". например:
<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;
}
вы можете просто содержать div в теге привязки следующим образом:
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>Просто сделайте свойство !important в вашем файле css, чтобы цвет фона не менялся при наведении курсора мыши. У меня это сработало.
Пример:
.fbColor {
background-color: #3b5998 !important;
color: white;
}
