Grow your CSS skills. Land your dream job.

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

  • # January 22, 2013 at 12:04 pm

    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

    # January 22, 2013 at 2:45 pm

    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}

    # February 7, 2013 at 10:48 am

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

    # February 7, 2013 at 11:08 am

    @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.

    # February 7, 2013 at 3:11 pm

    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}

    # February 7, 2013 at 6:25 pm

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

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

    # May 22, 2013 at 1:21 pm

    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/

    # May 22, 2013 at 1:49 pm

    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.

    # May 22, 2013 at 2:29 pm

    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/

    # May 22, 2013 at 2:32 pm

    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

    # May 22, 2013 at 2:33 pm

    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.

    # May 22, 2013 at 2:43 pm

    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}
    # May 22, 2013 at 3:06 pm

    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!

    # May 22, 2013 at 10:37 pm

    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

    # May 23, 2013 at 1:46 am

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

Viewing 15 posts - 16 through 30 (of 50 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".