Question

我有一个容器div，当你将鼠标悬停在它上面时会亮起来。它也会改变文本效果。但是，仅当此文本所在的子div本身没有文本效果时，才会更改文本效果。当div悬停时，我可以以某种方式覆盖此文本效果，然后当鼠标离开时将其返回吗？谢谢:)））））

（尝试覆盖.text div中的文本阴影效果。）

.maindiv2:hover
{
text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3C8DDE;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
cursor:pointer;
onclick="SomeJavaScriptCode";
}
.text {
    font-family: Arial, Helvetica, sans-serif;
    text-shadow:#ffffff 0px 0.05em  0px;
    font-size: 0.875em;
    font-weight: normal;
    float: left;
    width: 275px;
    text-align: right;
    padding-top: 10px;
    padding-right: 10px;
}

JsFiddle with two divs showing one working and the other not :)

Answer 1

我相信

.maindiv2:hover .text
{
    /* whatnot */
}

是一个选项，但它不是跨浏览器。

所以在你的情况下你需要这个：

.maindiv:hover .text
{
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}

在.text csss

之前

<强> Working Demo

Answer 2

.text类选择器覆盖父选择器属性。我认为最简单的选择是将text-shadow拆分为一个单独的规则，以捕获这两个要求：

.maindiv:hover, .maindiv:hover .text {
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
}

并从单个text-shadow选择器样式中删除.maindiv:hover。

将效果应用于不同div中的文本

2 个答案: