CSS: Di chuột một phần tử, hiệu ứng cho nhiều phần tử?

Tôi đang tìm phương pháp cho vấn đề lơ lửng của mình.CSS: Di chuột một phần tử, hiệu ứng cho nhiều phần tử?

<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 như vậy nếu tôi di chuột lớp lớp, cả hai lớp và lớp hình ảnh lơ lửng biên giới màu sắc đang hoạt động? Và ngược lại?

Nguồn

2009-09-22 Marko

160

Bạn không cần JavaScript cho việc này.

Một số CSS sẽ làm điều đó. Dưới đâ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>

Nguồn

2009-09-22 20:58:17 corymathews

+10

Okey, đây là người chiến thắng !! :) Tôi không biết rằng nếu tôi có một cái gì đó: di chuột, tôi có thể tiếp tục rằng whit yếu tố khác! (somthing: hover .second) .. Mỗi ngày bạn học điều gì đó mới .. Cảm ơn x10 – Marko

Tôi cũng không biết điều này. Cảm ơn bạn đã giúp đỡ. – fadedbee

Điều gì sẽ xảy ra nếu hai div (số một di chuột qua và hiển thị) không nằm trong cùng một div cha mẹ ngay lập tức? – bikashg

Bạn cần sử dụng JavaScript để thực hiện điều này, tôi nghĩ vậ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à nguyên tố id của phù :)

Nguồn

2009-09-22 20:26:36 inkedmn

Đẹp, rất tuyệt! Còn nếu tôi có nhiều phần cho cùng một tên lớp thì sao? Bây giờ tôi đã thử nó cho bốn tên lớp cùng một whit và khi tôi di chuột một, tất cả những thay đổi? Tôi có nên đặt trước số hiệu chạy của tất cả các phần không? Jquery có hỗ trợ ký tự đại diện anykind không? (okey, tôi thử chỉ google cho nó!;)) Cảm ơn .. – Marko

Đây không phải là khó khăn để đạt được, nhưng bạn cần phải sử dụng javascript onmouseover chức năng. 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.

Nguồn

2009-09-22 20:30:32 eykanal

+1 để sử dụng thay đổi CSS lớp thay vì phần tử làm ví dụ khác. – DVK

Điều này cũng đang hoạt động, cảm ơn! Tôi chỉ cố gắng tránh mã hóa nội tuyến nhiều nhất có thể ..;) – Marko

:) Vâng, đó là những gì bạn nhận được khi tôi gõ nhanh 'n mã bẩn. – eykanal

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ó thể muốn kiểm tra điều này với IE6 cũng như (tôi không chắc chắn nếu nó sẽ làm việc ở đó) .

Nguồn

2009-09-22 20:38:25

Trên thực tế nó có thể làm việc trong IE8, có vẻ như. Thêm Doctype tạo sự khác biệt. Vì vậy, có - một giải pháp CSS tinh khiết. ;) –

Tôi nghĩ rằng lựa chọn tốt nhất cho bạn là kèm theo cả divs bởi div khác. Sau đó, bạn có thể làm cho 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>

Nguồn

2009-09-22 21:03:46 Viliam

HOẶC

.section:hover > div { 
    background-color: #0CF; 
}

Chú ý trạng thái yếu tố Chánh chỉ có thể ảnh hưởng đến trạng thái yếu tố của một đứa trẻ vì vậy 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; 
}

Nguồn

2013-09-09 11:45:26 Jnr

CSS: Di chuột một phần tử, hiệu ứng cho nhiều phần tử?

Trả lời

Các vấn đề liên quan