I'm looking for a method for my hovering issue.
<div class="section">
<div class="image"><img src="myImage.jpg" /></div>
<div class="layer">Lorem Ipsum</div>
</div>
Now, both classes, image and layer, have borders. Both have different color for normal and hover. Is there way to make it, so if I hover layer class, both layer and image class hovering border color is active? And vise versa?
You'd need to use JavaScript to accomplish this, I think.
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');
}
);
});
Adjust the values and element id's accordingly :)
OR
.section:hover > div {
background-color: #0CF;
}
NOTE Parent element state can only affect a child's element state so you can use:
.image:hover + .layer {
background-color: #0CF;
}
.image:hover {
background-color: #0CF;
}
but you can not use
.layer:hover + .image {
background-color: #0CF;
}
This is not difficult to achieve, but you need to use the javascript onmouseover function. 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>
Use your own colors. You can also reference javascript functions in the mouseover command.
I think the best option for you is to enclose both divs by another div. Then you can make it by CSS in the following way:
<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>
This worked for me in Firefox and Chrome and 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>
... you may want to test this with IE6 as well (I'm not sure if it'll work there).
Source: Stackoverflow.com