CSS - interaction of two objects - CSS forum at WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

CSS - interaction of two objects

Can we affect color of an object by hovering another object?

vardan

6:27 pm on Aug 13, 2008 (gmt 0)

I was wondering if it is possible, using only CSS, to achieve the following goal:

You have two, for example div tags on an html page, div1 and div2. It is certainly easy to apply

div1 a:hover{style here}

to affect div1's properties, background, etc.. when you roll your mouse over that same div. What we want to achieve is to change the properties of the other div tag – div2, for example the background color of div2, when you roll your mouse over the first div object – div1. Is this possible in CSS without using javascript.

Thank you in advance.

D_Blackwell

8:22 pm on Aug 13, 2008 (gmt 0)

Yes, no, or maybe. It depends upon the relationship of div-1 and div-2 in the HTML/CSS 'tree'. One of the limitations of CSS is that styles only work in one direction; from 'larger' 'outer' boxes, into 'smaller' 'inner' boxes. You can't work back the other way with CSS. The code below, which I have pulled out an old page, changes the background colors for several boxes, and may be something similar to what you are looking to achieve - but if you want to effect CSS changes back 'down the tree' as you move up - no. Not with just CSS. (Note: The hovers used here will need to be hacked to work in IE. I use the well known hover.htc file for this.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>#*$!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
html, body {
margin: 0; padding: 0; font-size: 100%; background-image: url(../../images/gray.jpg);
}
/**********BOX HOVER*/
.outer {
float: left; border: .1em solid #000; padding: .4em; width: 250px; height: 180px; margin: 1em 1em 0 0; color: #000;
}
div.outer:hover {
background-color: #696969; background-image: none;
}
.inner {
border: .2em solid #ccc; height: 152px; padding: .3em; overflow: auto; background-color: #fff;
}
div.inner:hover {
background-color: #f5f5f5; color: #2f4f4f;
}
div.inner a {
color: #000; text-decoration: underline;
}
div.inner a:visited {
text-decoration: line-through; color: #808080;
}
div.inner:hover a {
color: #000;
}
div.inner a:hover {
color: #900; text-decoration: underline overline;
}
.segment {
color: #000; font-weight: 800; text-align: center; border-left: .2em solid #696969; border-right: .2em solid #696969; border-bottom: .1em solid #696969;
padding: 0 .3em; background-color: #d3d3d3; margin-bottom: .5em;
}
div.inner:hover div.segment {
background-color: #afafaf;
}
div.segment:hover {
background-color: #d3d3d3 !important;
}
li {
margin-bottom: .4em; list-style: none;
}
</style>
<div class="outer">
<div class="inner">
<div class="segment">
Incutio
</div>
<ul>
<li>
<a href="http://example.com/">
CSS Discuss
</a>
</li>
<li>
<a href="http://example.com/">
Technology
</a>
</li>
<li>
<a href="http://example.com/">
Using % w/images.
</a>
</ul>
</div>
</div>
</body>
</html>

vardan

8:35 pm on Aug 13, 2008 (gmt 0)

Thank you very much for your helpful comments! The relationships between the divs we have are more complicated than the nested ones, but we will see what we can do based on the code you sent.