CSS Controlling things with other things

Question

I'm new to the world of CSS3 / HTML5, and I want to do something but I didn't know how to do it. I'd like to control an element with another element, for example, when .A is hovered, .B goes blue. Is there a way to do this ?

Thanks!

Answer 1

You can do this with CSS selectors. If B is a child of A, it's very easy: you can do #A:hover > #B { ... }

Otherwise, you can use other particular selectors, like ~ and +.

Take a look here: http://css-tricks.com/child-and-sibling-selectors/

Answer 2

<div class='a'></div>
<div class='b'></div>

<style>
    .a {
        height: 100px;
        width: 100px;
        background: blue;
    }

    .b {
        height: 100px;
        width: 100px;
        background: green;
    }

    .a:hover + .b {
        background: red;
    }
</style>

http://jsfiddle.net/vgoLx7z0/

Here's a fiddle for it, although I do recommend using jQuery for it anyway

Answer 3

Yes, there is... But with some conditions.

You have several css relative selectors, but they only target for following sibilings, and children.

Some examples:

• .a:hover + .b - selects the .b element that immediatly follows a hovered .a as a sibiling.
• .a:hover ~ .b - selects the .b element that follows at any distance a hovered .a as a sibiling.
• .a:hover > .b - selects the .b element that is a direct child of a hovered .a.
• .a:hover .b - selects the .b element that is a child at any nested level of a hovered .a.

There are many other relational selectors, you can find out more: http://www.w3.org/TR/selectors/

Be aware that there are no parent selector, neither previous sibiling selectors... Only followers

For a more varied kind of selection, you'll have to look into Javascript manipulation, so you can navigate through elements any way you want!

Answer 4

Is there a way to do this? Yes, but there are a lot of limitations.

First of all, you need to define the "action", which is done using CSS pseudo-classes. Pseudo-classes (and CSS in general) aren't really action-oriented. In fact, the only real action would be the :hover pseudo class (and the :focus, which is triggered when you put your typing cursor in a form field).

Next, you'll need to define your target element. To do this, you'll need to use child and sibling selectors. There's a handful of these, but they're all very specific and not very flexible. They'll do things like "select the first paragraph tag that is a direct child of the div tag which has a particular id". For example, if you have the following HTML:

<ul id="menu">
    <li><a href="">Link</a>
        <ul style="display:none">
            <li><a href="">Sub-menu item</a></li>
        </ul>
    <li>
</ul>

You can use the following CSS to make the sub-navigation visible when you hover over its parent:

#menu li:hover > ul {
    display:block;
}

This example finds the ul element which is a direct child of the li element which is being hovered over. See the link I posted above for an in-depth exploration of sibling and child selectors.

When you need to do something more complicated or more flexible (for example, changing an element based on a click instead of hover), you will need to use JavaScript or jQuery, or some similar scripting solution.

Answer 5

You are looking for the :hover pseudo selector.

The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it.

W3 Definition
You would use :hover like:

.a:hover .b{
background:red;
}

This selects a element with the class .b inside a element with the class .a like so:

 <div class="a">
    Hover over me!
    <div class="b">
    I will turn red when you hover over my parent.
    </div>
</div>

You can also select direct siblings:

.a:hover + .b{
    background:red;
    }

 <div class="a">
    Hover over me!
 </div>
 <div class="b">
 I will turn red when you hover over .a.
 </div>

Or indirect siblings:

.a:hover ~ .b button{
        background:red;
        }



      <div class="a">
            Hover over me!
         </div>
         <div class="b">
         <button>
         I will turn red when you hover over .a.
         </button>
         </div>

But, you cannot select parents or sibling above the hovered element.
JSFiddle Demo of CSS selection
The other option is to use JavaScript onmouseover & onmouseout:

<div id="parent" >Lorem ipsum dolor...<h1>
    <div id="b" onmouseover="document.getElementById('parent').style.backgroundColor='red';" onmouseout="document.getElementById('parent').style.backgroundColor='white';">Hover over me and change my parent!</div></h1>
</div>

JSFiddle Demo
You could also use JQuery hover(), but that is really not needed for this small a operation.