Jump to content
Sign in to follow this  
thescientist

:hover To Change Another Elements Background-image?

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

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

im taking it making it a <li> would be a good first step?

Share this post


Link to post
Share on other sites

cool, im almost there. I can target the next one, anyway to always have it target the first sibling everytime?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

A ha, brilliant idea about reversing the direction of the float! Works perfectly now. Thanks again DD! :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...