Jump to content

:hover To Change Another Elements Background-image?


thescientist
 Share

Recommended Posts

http://www.analogstudios.net/analogstudios_v2/index.htmlSo in my <ul>, if I rollover a <li>, is there a way to get it to change the background-image of another div? I've tried but have only managed to get it partially working, but I'm hoping this will be a good test of finally really learning selectors.So basically if you position over a nav <li>, the div that contains the text "set image here" (#image_swapper), will change its background-image
Link to comment
Share on other sites

The ways selectors are designed, the target element can be a linear descendant of the rollover element, a sibling element, or the linear descendant of sibling element.It is often possible to create elements that are logical siblings or descendants, even though their physical positioning does not reflect the logical relationship. It's a little tacky when the disjunct is extreme, but sometimes it's the only way. The most common example is when rolling over a thumbnail changes a target image way across the page.So what I'm saying is, even if your div is located somewhere far away from your <li>, find a way to make it a descendant (etc) of the <li>.If nothing else comes to mind, our old friend absolute positioning can remove the div from the physical flow.If you have to target the same div from a lot of different <li> elements, sibling selectors might be your friend.I justify doing this sort of things on the grounds that CSS selector patterns are less comprehensive than they should be.

Link to comment
Share on other sites

For example, ugly and unsemantic as it is, this works:

div {	position: absolute;	width: 100px;	height: 100px;	top: 500px;	left: 500px;}li:hover + li div,li:hover + li + li div,li:hover + li  + li + li div,li:hover + li  + li + li + li div{	background-color: #000000;}---<ul>	<li>one</li>	<li>two</li>	<li>three</li>	<li>four</li>	<li><div></div></li></ul>

You would have multiple definitions because you want multiple images, but this is proof of concept.

Edited by Deirdre's Dad
Link to comment
Share on other sites

The ways selectors are designed, the target element can be a linear descendant of the rollover element, a sibling element, or the linear descendant of sibling element.It is often possible to create elements that are logical siblings or descendants, even though their physical positioning does not reflect the logical relationship. It's a little tacky when the disjunct is extreme, but sometimes it's the only way. The most common example is when rolling over a thumbnail changes a target image way across the page.So what I'm saying is, even if your div is located somewhere far away from your <li>, find a way to make it a descendant (etc) of the <li>.If nothing else comes to mind, our old friend absolute positioning can remove the div from the physical flow.If you have to target the same div from a lot of different <li> elements, sibling selectors might be your friend.I justify doing this sort of things on the grounds that CSS selector patterns are less comprehensive than they should be.
ok, based on what seems like what makes the most sense, I am reading this. I think it should net me what I want. Your thoughts? Am I headed in the right direction? http://meyerweb.com/eric/articles/webrev/200007a.html Edited by thescientist
Link to comment
Share on other sites

Changing the div to an li and making them all siblings gets you real close.If I understand, your target item is #1 and you want to hover on #2-4 and have it change the state of #1? As far as I know, that can't work. You can go down a tree, but not up it. You can go left to right, but not right to left. That's why I stuck the target on the end and hacked the position so it presents on the left.Play with this idea:Float the items RIGHT but arrange them in reverse order. They should display in the correct sequence now. Originally, I set the display property to inline block, but this seems to be unnecessary. If it breaks, though, try doing that.With this reversed arrangement, the item you want to toggle can be the last item in the list, but appear first from left-to-right.I tested the concept in FF and IE7. All I did was toggle the background-color, not an image, but it works, and with no stupid positioning tricks, and nothing unsemantic.I'm sure if you can work out the positioning of the list, which I have not experimented with.Here's what I'm talking about:

li {	display: inline;	list-style: none;	float: right;	margin-left: 10px; }li:hover + li#targ {	background-color: #faa;}li:hover + li + li#targ {	background-color: #afa;}li:hover + li + li + li#targ {	background-color: #aaf;}-----<li>four</li><li>three</li><li>two</li><li id="targ">one</li>

Strictly proof of concept.

Edited by Deirdre's Dad
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...