List item hover, change image in another div

[modiophile]

I thought this could possibly be done with CSS, but since the hover element is not a sibling of the div I want to affect – its not possible.

http://codepen.io/modiophile/pen/QNYyLZ?editors=1100

div.steps ol li:first-of-type::hover + figure {
  background-image: url("http://placehold.it/350x150");
}

Nice try right? How would I accomplish this with JS?

[Beverleyh]

http://jsbin.com/ratevanoto/edit?html,css,js,output

View on JSbin

[Beverleyh]

Not sure if my previous post got eaten or fell into the mod queue. It included a bit more info than just the fiddle above, but hey ho. I’m on mobile so have lost the energy to type it again. You have the important parts at least, so that’s the main thing.

I used ‘click’ in the demo but you can change it to ‘mou5eover’, etc.

EDIT : And I’ve just worked out why my post got moderated. Replace the 5 above with an ‘s’ and there are 3 letters sat together that spell Google-type friendliness optimisation!

[modiophile]

I don’t see anything in your previous post :(

[Beverleyh]

Don’t you see the JSBin?

[Shikkediel]

I can’t see it either in Firefox and Chrome. I think it triggers some security violation as I could allow it in IE. And very oddly, with Opera it’s showing a “ghost” of the initially posted pen at some point and then a blocked content icon that I can allow on other occasions.

https://www.anony.ws/image/JKLZ

[Beverleyh]

Strange. I haven’t made it to a desktop yet but can see an embedded JSBin on iPhone.

Looks like one of the mods added a “view on JSBin” link for you though, modiophile. Thank you chaps :)

[modiophile]

FYI for future reference, change click to mouseenter for hover.

http://codepen.io/modiophile/pen/dMaEJq/

[I.m.learning]

@Beverleyh
Did you change your post that disappeared?
I was taking a break from my webpage and was looking around here and saw your post only displayed the link and nothing else.

After returning to working on my page; I was testing buttons; one of the tests would not open the alert. After looking @ SO; there was a post that mentioned to reset my IE.

After seeing the reset allowed me have that alert work; I came back here and now I see a spinning [“what the heck is that?” ] with JS on it.

My Windows 10 has been giving me grief with not showing my icons in the task bar, nor allow me left or right click my start button.

That’s why I was wondering if you had changed it.

Now, I had written “you” instead of “your” as I went to resubmit it; I had a popup about security settings and the image was not there. HMMMM…

I’m using IE; and I have to allow for “show all content.” Nevermind

[Author]

Posts