Hover event CSS not working at all

Question

I'm trying to make a div appear over an image using CSS "hover" event. But it's not working at all. Nothing happens at all... could you check what's going on? Thank you.

.over {

        display: none;
        opacity: 0.6;
        background: #F58634;
        font-family: Montserrat;
        color: white;
        padding: 20px;
        width: 171px;
        height: 114px;
        z-index: 2;

    }

    .over:hover {

        display: block;

    }

    .img {

        z-index: 1;

    }

And here is the HTML...

<td width="171px" >
                <img class="img" src="./img/cat/_MG_7415.JPG" alt="" width="171px" height="114px">

                <div class="over">
                    <table>
                        <tr>
                            <td>PESO</td>
                            <td>0,500gr</td>
                        </tr>
                        <tr>
                            <td>VALIDADE</td>
                            <td>60 DIAS<br><span style="font-size:5px;">APÓS DATA DE FABRICAÇÃO</span></td>
                        </tr>
                        <tr>
                            <td>CAIXA</td>
                            <td>5kg</td>
                        </tr>
                        <tr>
                            <td>TEMPERATURA</td>
                            <td>0 a 5ºC</td>
                        </tr>
                    </table>
                </div>

            </td>

So, I want the div class ".over" to overlay ".img" to show some information mouse is on the image. Is there anything I'm missing?

Thanks!

display:none doesn't display the element, so you can't hover over it. Use visibility instead — Jacob G
– Jacob G, Commented Apr 5, 2016 at 0:04

Roy · Accepted Answer · 2016-04-05 00:14:41Z

.over {
        display:none;
        opacity: 0.6;
        background: #F58634;
        font-family: Montserrat;
        color: white;
        padding: 20px;
        width: 171px;
        height: 114px;
        z-index: 2;
    }
    img.img:hover + .over {
        display:block;
    }

<td width="171px" >
                <img class="img" src="./img/cat/_MG_7415.JPG" alt="" width="171px" height="114px">

                <div class="over">
                    <table>
                        <tr>
                            <td>PESO</td>
                            <td>0,500gr</td>
                        </tr>
                        <tr>
                            <td>VALIDADE</td>
                            <td>60 DIAS<br><span style="font-size:5px;">APÓS DATA DE FABRICAÇÃO</span></td>
                        </tr>
                        <tr>
                            <td>CAIXA</td>
                            <td>5kg</td>
                        </tr>
                        <tr>
                            <td>TEMPERATURA</td>
                            <td>0 a 5ºC</td>
                        </tr>
                    </table>
                </div>

            </td>

CSS solution: Use + selector to select the next element.

.over {
    display:none;
    opacity: 0.6;
    background: #F58634;
    font-family: Montserrat;
    color: white;
    padding: 20px;
    width: 171px;
    height: 114px;
    z-index: 2;
}
img.img:hover + .over {
    display:block;
}

Seva Kalashnikov · Accepted Answer · 2016-04-05 00:03:29Z

1

Here's the solution with jQuery

<script>
    $(function() {
        $('img.img').hover(function() {
            $('div.over').show();
        }, function() {
            $('div.over').hide();
        });
    );
</script>

In this case you will no longer need this:

.over:hover {

    display: block;

}

answered Apr 5, 2016 at 0:03

Seva Kalashnikov

4,4322 gold badges26 silver badges36 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:45:08Z

1

The div has display:none so it's not being displayed and it is therefore impossible to hover over it.

Try changing it to display:block and instead changing the opacity in the hover.

As mentioned by Jacob Gray in a comment to your post, you can use visibility. So, instead of changing the opacity in the hover, you can set that once and then set visibility initially to hidden and then to visible during the hover.

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Apr 5, 2016 at 0:05

Hapaxia

1531 silver badge11 bronze badges

1 Comment

Roy Over a year ago

I thought the same thing. But the OP wants to display the .over on hovering on the previous image. Not the .over itself.

Ahmad Asjad · Accepted Answer · 2016-04-05 00:17:00Z

1

https://jsfiddle.net/ahmadasjad/52mmdxyb/

Dear, You have defined hover event on .over whereas it's already hidden. When it's not available, how we can mouse over on that element! What you need is that hover on image then show the content in the div. I have done accordingly. Please check jsfiddle.

Removed:

.over:hover {

        display: block;

    }

And changed it to

.img:hover +  .over {
        display: block;
    }

it means: if mouse over on image, please show content of div having class over

answered Apr 5, 2016 at 0:17

Ahmad Asjad

8231 gold badge9 silver badges30 bronze badges

Collectives™ on Stack Overflow

Hover event CSS not working at all

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related