Question

当我将鼠标悬停在自身上时，我想将opacity: 1;应用于段落（我已经想到了）和当我将标题悬停在它上面时。

这是我的CSS

.testH {
    font-family: impact;
    text-align: center;
    font-size: 50px;
    transition: all 1s;
}

.testP {
    text-align: center;
    opacity: 0.5;
    font-size: 18px;
    transition: all 1s;
}

#testHdiv:hover {
    opacity: 1;
}

.testP:hover {
    opacity: 1;
}

我的HTML

    <div id="testHdiv"><h1 class="testH"><b>< ></b></h1>
    <p class="testP">Text and text, more text<br>Bla bla bla bla</p>
    </div>

所以，正如你所看到的那样，我试图从当前0.5的段落中获得不透明度，当悬停Div时为1 - 我的想法是：能够悬停一个“盒子”/ div，并且文本不那么透明。虽然我认为Div的悬停上的opacity不起作用，因为div被定义为Div，而不是文本，因此不能透明？

我一直在努力解决这个问题。但我基本上想要这样的东西：http://demo.web3canvas.com/themeforest/flathost/onepage/index.html#testimonials，你悬停在文本的范围内并且它正在被缩放 - 在这种情况下，只是具有不透明度。

Answer 1

您可以将班级设置为<p>或只是，使用运算符将:hover设置为段落。

示例：

#testHdiv:hover > p { opacity: 1; }

http://jsfiddle.net/g97pusex/1/

Answer 2

只需改变一下：

#testHdiv:hover {
    opacity: 1;
}

就是这样：

#testHdiv:hover p{
    opacity: 1;
}

Answer 3

您希望将不透明度应用于p元素，而不是div。根据您提供的样式，您可以将其更改为：

.testH {
    font-family: impact;
    text-align: center;
    font-size: 50px;
    transition: all 1s;
}

.testP {
    text-align: center;
    opacity: 0.5;
    font-size: 18px;
    transition: all 1s;
}

#testHdiv:hover .testH {
    opacity: 1;
}

#testHdiv:hover .testP {
    opacity: 1;
}

注意:hover选择器如何应用于div，但样式应用于p元素.testP

Answer 4

如果您正在尝试悬停div并悬停它会影响段落不透明度，请将CSS更改为：

#testHdiv:hover  .testP{
     opacity: 1;

}

悬停DIV或其他元素时的不透明度

4 个答案: