how to move 2 divs on hover with css


Tags: css,html,hover,parent-child

Problem :

My current layout goes like this :

I have a parent div named "chapters" which holds the 2 divs inside "listHolder" and "chapterButton"

when i hover on "chapterButton" I want chapterButton and listHolder both to shift 150px to the left, this is to go on a video so when u hover on the chapterButton which is visible on the video player they both shift onto the video player and the chapters (a set of list items) are now visible so you can select your chapter.

at the moment all i can seem to do is move one of the sibling divs at a time. So how can i make both of these shift left at the same time.

im currently using this :

.chapterButton:hover + .listHolder{
position:relative;
right:150px;
}

this does move .listHolder 150px to the left but how can i change this so on hover .chapterButton and .listHolder move left?

The easiest way would be to move the parent dive left as it contains both these divs, but is this possible if your hovering on the child div ?

Answered by chen asraf below



Solution :

.chapterButton:hover, .chapterButton:hover + .listHolder {
    position:relative;
    right:150px;
}

    CSS Howto..

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How to add modal window parameters for this code?

    How to Display a div on mouse-over using jquery ?

    How can I remove the border around all the cells in a table?

    how to use !important in jQuery animate() function

    How to distribute cell height evenly within a row spanning two cells vertically?

    How do I set multiple elements' css in one page without the :not attribute?

    How to make images inside a box responsive CSS

    How to apply an inner stroke to an image with just CSS?

    How to save(download) HTML page with all images, css etc in Android?

    How to change css rules of external stylesheet [duplicate]

    how to align vertically an absolute element with a variable height above its parent?

    JQuery: How to change CSS of elements that are with a certain element in one group

    How to create a WoW-like cooldown effect?

    How to align div elements while using css tables

    How to select the first occurrence of an HTML element in CSS that does not have a specific class?

    How to make hover css menu fade in and out?

    How to start Bootstrap carousel with the first image at each occurrence of a modal window? [closed]

    CSS: How to set 100% width on the first li of ul

    How to set class on div that is inside of repeater in code behind?

    How to only select a displayed element using CSS

    Thai line breaking: how to break Thai text effectively

    How can I change the style of thumbnails?

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    How are CSS frameworks used?

    How can I align a div at the edge of a div above it when said div is using automatic positioning?

    How to change anchor color when you hover over a list

    How to make rounded border in IE8 with CSS?

    How to use css in asp.net for web server control?

    How to modify css class of container for specific element ID