I'm using css :hover option but my code is not working

Question

I'm currently working some code for my website and I came to this problem. I want to change background of paragraph on div's hover but it doesn't seems to works. I found some tutorials and I don't know what is wrong with my code

<style>

    .more_news{
        padding:10px;
        border:1px double lightgray;
        width:170px;
        height:100px;
        overflow: hidden;
        margin:0px; 
    }

    .more_news img{
        width:100%;
        height:100%;
    }

    .more_news p{
        color:green;
        position:absolute;
        display:block;
        background:gray;
        margin-top:-40px;
        width:170px;
        height:40px;
    }

    .more_news div:hover ~ .more_news p{
        background:red;
    }

</style>

<div class="more_news">
    <img src="images/proba1.png" class="more_news_img">
    <p class="more_news_p">Hello</p>
</div>

Dryden Long · Accepted Answer · 2014-04-11 21:06:42Z

3

All you need to do is select the class and element like so:

p.more_news_p:hover {
    background:red;
}

No need for ~ or any other combinator/selector

http://jsfiddle.net/7H4XW/

Or, if you want to change the background when you hover over the entire div you can do something like this:

.more_news:hover p.more_news_p {
    background:red;
}

http://jsfiddle.net/qfb9Z/

edited Apr 11, 2014 at 21:06

answered Apr 11, 2014 at 20:59

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dsgriffin · Accepted Answer · 2014-04-11 21:03:56Z

1

"I want to change background of paragraph on div's hover but it doesn't seems to works."

You'd just use:

.more_news:hover > .more_news_p {
  background:red;
}

You were using the general sibling selector ~, which selects sibling elements after that element.

whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)

jsFiddle here

edited Apr 11, 2014 at 21:03

answered Apr 11, 2014 at 20:58

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

3 Comments

dsgriffin Over a year ago

@Roman How doesn't it? Your question says when you hover the div you want to highlight the paragraph?

Roman Over a year ago

Ah thank u, it is working now, but can u explain me when i use ~ ? :)

Roman Over a year ago

I go sleep now, will see that tomorrow. :)

Collectives™ on Stack Overflow

I'm using css :hover option but my code is not working

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related