Hovering on element and making another element appear at the same time

Question

I've been trying to figure this out for a long time and I can't seem to get it. I have the following HTML:

<div class="b">
    <button>Show when I hover</button>
</div>
<div class="A">When I hover over this the background should change</div>

with the corresponding CSS:

.b {
    float: right;
    display: none;
}
.A {
    float: left;
    display: inline;
    width: 1000px;
}

.A:hover {
    background: gray;
}

.A:hover + .b {
    display: block;
}

What I'm trying to do is whenever I hover over A the b div and corresponding button should show. In addition, I want it such that when my mouse is on the button, the background of A is still gray as if I was hovering over it. I can't seem to figure this out. Any ideas?

Relevant JSFiddle: http://jsfiddle.net/sn19k1wz/3/

the '+' selector only works when `.b` is followed by `.a:hover`. check this [**JSFiddle**](http://jsfiddle.net/vivekkupadhyay/sn19k1wz/5) — vivekkupadhyay, Sep 30 '15 at 05:33
either try what @vivekkupadhyay telling or you can have that element in A class http://jsfiddle.net/n3x0ns3q/1/ — NullPoiиteя, Sep 30 '15 at 05:33
@NullPoiиteя 's approach is much better if you want to use `button` too, I just wanted to tell what a `+` selector does. — vivekkupadhyay, Sep 30 '15 at 05:35
check the difference between `+` and `~` on this [link](http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling). Here is [JSFiddle](http://jsfiddle.net/sn19k1wz/7/) for `~` — kakajan, Sep 30 '15 at 05:39
do you must use only css? you can make it with javascript more easier and efficient — kakajan, Sep 30 '15 at 05:40

score 0 · Answer 1 · answered Sep 30 '15 at 05:46

0

You can do this by changing position of A and B

<div class="A">When I hover over this the background should change</div>
<div class="b">
    <button>Show when I hover</button>
</div>

answered Sep 30 '15 at 05:46

om_jaipur

2,176
4
30
54

score 0 · Answer 2 · answered Sep 30 '15 at 05:49

0

Change the div positions, hovering div tag should be the first one

Like this :

<div class="A">When I hover over this the background should change</div>
<div class="b">
    <button>Show when I hover</button>
</div>

Demo URL

answered Sep 30 '15 at 05:49

RAN

1,443
3
19
30

score 0 · Answer 3 · answered Sep 30 '15 at 05:53

Try like this: Demo

 .A {

    display: inline-block;
    width: 1000px;
      position: relative;
}
.b {   
    display: none;
    position: absolute;
    z-index: 999;
    right: 0;
    top:6px;
}
.A:hover {
    background: gray;
}
.A:hover + .b {
    display: block;
    background: red;
    cursor:pointer;
}

Hovering on element and making another element appear at the same time

3 Answers3