Tôi đang cố gắng thay đổi màu nền của div khi di chuột qua .
the div {background: white;}
the div a: hover {background: gray; chiều rộng: 100%;
hiển thị: khối; text-decoration: none;}
chỉ các liên kết bên trong div được màu nền .
tôi có thể làm gì để toàn bộ div có được màu nền đó?
cảm ơn bạn
CHỈNH SỬA:
làm thế nào tôi có thể làm cho toàn bộ div hoạt động như một liên kết - khi bạn nhấp vào bất kỳ đâu trên div đó, để đưa bạn đến một địa chỉ.
Câu trả lời:
Theo a:hovernghĩa đen, "" cho trình duyệt thay đổi các thuộc tính cho <a>-tag, khi con chuột được di chuột qua nó. the div:hoverThay vào đó, ý của bạn là " ", sẽ kích hoạt khi div được chọn.
Để đảm bảo rằng, nếu bạn chỉ muốn thay đổi một div cụ thể, hãy cung cấp cho nó một id (" <div id='something'>") và sử dụng CSS " #something:hover {...}" thay thế. Nếu bạn muốn chỉnh sửa một nhóm div, hãy biến chúng thành một lớp (" <div class='else'>") và sử dụng CSS " .else {...}" trong trường hợp này (lưu ý dấu chấm trước tên của lớp!)
Sử dụng 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>Không cần phải đặt neo. Để thay đổi kiểu của div khi di chuột, sau đó Thay đổi màu nền của div khi di chuột.
<div class="div_hover"> Change div background color on hover</div>Trong trang .css
.div_hover { background-color: #FFFFFF; }
.div_hover:hover { background-color: #000000; }Để làm cho toàn bộ div hoạt động như một liên kết, hãy đặt thẻ liên kết là:
display: blockVà đặt chiều cao của thẻ liên kết thành 100%. Sau đó, đặt chiều cao cố định cho thẻ div của bạn. Sau đó, tạo kiểu cho thẻ neo của bạn như bình thường.
Ví dụ:
<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>Chúc may mắn!
Mã HTML:
<!DOCTYPE html>
<html>
<head><title>this is your web page</title></head>
<body>
<div class = "nicecolor"></div>
</body>
</html>mã css:
.nicecolor {
color:red;
width:200px;
height:200px;
}
.nicecolor:hover {
color:blue;
}và đó là cách bạn sẽ thay đổi div của mình từ đỏ sang xanh lam bằng cách di chuột qua nó.
chỉ cần thử thuộc tính "hover" của CSS. ví dụ:
<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>Hy vọng điều này có thể giúp cho bạn
bạn chỉ có thể chứa div trong thẻ neo như thế này:
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>Chỉ cần làm cho tài sản !important trong tệp css của bạn để màu nền không thay đổi khi di chuột qua. Điều này phù hợp với tôi.
Thí dụ:
.fbColor {
background-color: #3b5998 !important;
color: white;
}