[Solved] How to make hovering over one div to trigger changes in another div?

[kyvaith]

But… is it possible to make general section (big square) as a neutral place? I’m referring to this sample: http://jsfiddle.net/daFDn/4/ When you put mouse over ‘Item 1’ the big square says ‘worked 1’. But when I put mouse over big square after that it still says ‘worked 1’. It should say ‘neutral’. Please help and sorry for my English : D

[Jozsef K.]

http://jsfiddle.net/daFDn/312/

First you make hover on link, the image appears on the right, then you hover on image without any pause, so the image does not dissapear but continues to display while you hover it.

I took out the img:hover {display:block}

[ichibon]

Is there a way to make the image stay on the selection when it’s clicked?

[Paulie_D]

@ichibon

Perhaps you could provide us with a Codepen of what you are after (obv. without the click)?

The answer is likely to be that Javascript will be required to perform certain actions on the click event.

[Jozsef K.]

yes, with the radio button hack.

The left side will be radio buttons instead of links.Then you can use input:checked ~ img.pic1 {display:block}

[yeeyang]

(without reading everyting) @chriscoyier did a write up on something similar to this using :target

[Check that out.](https://css-tricks.com/on-target/ “”)

[psykg]

Is it posible for item1 to be auto selected as soon as page load, or to stay selected (item1) if mouse goes out of div area?

http://jsfiddle.net/daFDn/4/

[Junni]

as you see if we hover on one two and three then on right side which comes over, those all are pics, can any one please tell me how to do that if i hover on left boxes then some data which have written , will show on right boxes respectively hovering on left boxes.

[Jozsef K.]

psykg just add an active class on first li element, and add .active img {display:block}

http://jsfiddle.net/daFDn/867/

Junni, I don’t understand your question, but the hovering part is shown here:

http://jsfiddle.net/gU4sw/7/

[Junni]

Sir Actually i want know that, if we are trying to show some written lines besides these pics,
as when we hover on Item one it displays a pic on right side so if we want some lines not the pic what we will do

[Junni]

jozsef! http://jsbin.com/amitet/74/edit i have this, so please tell me how can i manage that if i hover on main div’s then, the line which i have putt on the last of my code dont go down , while showing the contents with respective hovers.

[Jozsef K.]

Well you could float the divs or position the viewarea with absolute position.

#list {float:left;width:50%}

#viewarea {float:left;width:50%;padding-top:80px}

[psykg]

Tnx jozsef ! i was making another div same as selection 1 and put z-index:1; for it, and than for selection 1 z-index:100; but your way is easier! cheers!

[Junni]

jozsef!! actually i want to know that, http://jsfiddle.net/jnQ4d/ when i will hover on Services , then it must show a div which is Displayed None. but with hover will display : block please help me in this case

[Jozsef K.]

http://jsfiddle.net/jnQ4d/1/

[Author]

Posts