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 alternate HTML table row colors using JSP?

    How to set a minimum content size of a webpage in html, css? [closed]

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    how to create a css translateY on hover effect

    How to align items in second (and further) column, so that the changing value (increasing characters) do not push

    How do you measure the height of a HTML element scaled with CSS3 transform?

    How to disable by overriding webkit-transform and not deleting the line

    How to use jQuery to detect loaded background image after inserting out CSS

    HTML/CSS | How to place different elements in a header div to different positions?

    How to make Bootstrap container auto for height?

    How to apply a CSS gradient over a text, from a transparent to an opaque colour

    How to fill an HTML form with CSS?

    how can I shape the image size according to its nested box

    How to change the look of a timer in javascript, css?

    How to center text inside div in this specific situation? [duplicate]

    how to fix this horizontal list on Chrome and Opera?

    How can I redirect a request file to real folder with htaccess?

    How to switch visibility of an HTML div in css for overlaying

    How to rotate the text Rotation with center to the Number

    How to make a Check Button? (hidden checkbox with label as a button: CSS only)

    How to add class to column of grid with angular-ui-grid?

    How remove striped rows in JavaFX 8 TableView

    How to add a CSS style to a specific node using Greasemonkey? [closed]

    How do I customise the style of the Auth0 lock control?

    How can I get some padding between these form boxes?

    How to tell the code to choose between two variables and make them equal?

    How to alternate background colour on DIV rows? (Jquery and/or CSS)

    How do I keep an image and text centered vertically with bootstrap?

    How to change Google Chrome Arabic default font in css?

    In Ember how to use a view to change a css property and then view it?