css3 pure: how to hover an element outside?


Tags: css3

Problem :

div.test:hover #sendBtn{
    color:red;
}

This works fine is sendBtn is INSIDE the div.test element

But how to achieve this (pure CSS) when it is outside ? ex:

<button id="sendBtn">hello</button>
<div class='test'>div here</div>


Solution :

There is no selector for previous element in css but you can change the order of the elements and use adjacent sibling selector:

html

<div class='test'>div here</div>
<button id="sendBtn">hello</button>

css

div.test:hover + #sendBtn {
    color:red;
}

fiddle


    CSS Howto..

    How do I stop a CSS layout from distorting when zooming in/out?

    How to position bottom of div above top of its container

    How can I style this php with divs?

    How to wrap text to the next line inside a DIV and not go off the screen

    How to do something like border-top-left-color. [CSS]

    How to use font-awesome from server

    How can I centralize this jquery styling colors into css?

    How to implement a table structure using CSS

    CSS style not showing on print preview

    unexpected script/css conflict, how to resolve?

    How to add styles to wordpress default menu

    How to right align last two columns of a table with CSS

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How do I change the z-index of a div when the user mouses over it?

    How to Align all inputs in a Form

    How to leave input file button usefull for drag and drop from desktop, but avoiding local redirection

    CSS: How to get an animated gif background-image on top of a div

    How can I apply a link over this entire div?

    How to create a
      with a triangle for the :active row?

    How to explain using browser.sleep in protractor

    How do I animate a div with css3 to move and spin?

    how can I use CSS to hover over an entire list element including the bullet?

    Non-responsive website - Viewport issue - Page showing zoomed in on mobile

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How to add css class on every third post in wordpress?

    How can I get the name of a page via Laravel Blade

    how to use text-indent only with element not ont it's :before Selector?

    How to add the same header and footer to all pages at once? HTML

    How do I get the border-radius from an element using jQuery?

    How to properly use CSS borders to visualize a value chain?