Tôi đang tìm một phương pháp cho vấn đề di chuột của mình.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Bây giờ, cả hai lớp, hình ảnh và lớp, đều có đường viền. Cả hai đều có màu khác nhau cho bình thường và di chuột. Có cách nào để làm cho nó, vì vậy nếu tôi di chuột qua lớp lớp, cả màu đường viền di chuột của lớp và lớp hình ảnh đều hoạt động? Và ngược lại?
Câu trả lời:
Bạn không cần JavaScript cho việc này.
Một số CSS sẽ làm điều đó. Đây là một ví dụ:
<html>
<style type="text/css">
.section { background:#ccc; }
.layer { background:#ddd; }
.section:hover img { border:2px solid #333; }
.section:hover .layer { border:2px solid #F90; }
</style>
</head>
<body>
<div class="section">
<img src="myImage.jpg" />
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>Điều này đã làm việc cho tôi trong Firefox và Chrome và IE8 ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
div.section:hover div.image, div.section:hover div.layer {
border: solid 1px red;
}
</style>
</head>
<body>
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</body>
</html>
... bạn cũng có thể muốn kiểm tra điều này với IE6 (tôi không chắc liệu nó có hoạt động ở đó không).
Tôi nghĩ lựa chọn tốt nhất cho bạn là bao gồm cả hai div bởi một div khác. Sau đó, bạn có thể tạo nó bằng CSS theo cách sau:
<html>
<head>
<style>
div.both:hover .image { border: 1px solid blue }
div.both:hover .layer { border: 1px solid blue }
</style>
</head>
<body>
<div class="section">
<div class="both">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
</div>
</body>
</html>
Điều này không khó để đạt được, nhưng bạn cần sử dụng onmouseoverhàm javascript . Pseudoscript:
<div class = "section">
<div class = "image"> <img src = "myImage.jpg" onmouseover = ". layer {border: 1px solid black;} .image {border: 1px solid black;}" /> </div>
<div class = "layer"> Lorem Ipsum </div>
</div>
Sử dụng màu sắc của riêng bạn. Bạn cũng có thể tham khảo các hàm javascript trong lệnh di chuột qua.
Tôi nghĩ rằng bạn cần phải sử dụng JavaScript để thực hiện điều này.
jQuery:
$(function(){
$("#innerContainer").hover(
function(){
$("#innerContainer").css('border-color','#FFF');
$("#outerContainer").css('border-color','#FFF');
},
function(){
$("#innerContainer").css('border-color','#000');
$("#outerContainer").css('border-color','#000');
}
);
});
Điều chỉnh các giá trị và id phần tử cho phù hợp :)
HOẶC LÀ
.section:hover > div {
background-color: #0CF;
}
LƯU Ý Trạng thái phần tử mẹ chỉ có thể ảnh hưởng đến trạng thái phần tử con nên bạn có thể sử dụng:
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
nhưng bạn không thể sử dụng
.layer:hover + .image {
background-color: #0CF;
}