Question

我目前正在为我的网站工作一些代码，我遇到了这个问题。我想改变div的悬停段落的背景，但它似乎没有用。我找到了一些教程，我不知道是什么我的代码错了

<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>

Answer 1

您需要做的就是选择类和元素，如下所示：

p.more_news_p:hover {
    background:red;
}

无需~或任何其他combinator/selector

http://jsfiddle.net/7H4XW/

或者，如果您想将鼠标悬停在整个div上时更改背景，可以执行以下操作：

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

http://jsfiddle.net/qfb9Z/

Answer 2

“我想更改div的悬停段落的背景但是它似乎不起作用。“

你只需使用：

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

您使用的是general sibling selector ~，它会在该元素后选择兄弟元素。

而你实际上想要定位一个child元素的段落 - 因此使用直接子选择器（>）

jsFiddle here

我正在使用css：hover选项，但我的代码无效

2 个答案: