1

我正在尝试在文本块上创建纯 CSS 悬停效果。这是html..

<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>

和CSS ..

.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}

.background-switch:hover {
background-color: lightblue;
color: white ; 
}

没有标签它可以正常工作..但问题是我需要“现在”的颜色<span>在<p>悬停之前为红色，在悬停时为白色。情况并非如此，因为红色在悬停时拒绝变成白色。有没有办法使类属性<span>也适用于？

4

7 回答 7

3

因为你有：

<span style="color:red;">

这是一个inline style，它不会被覆盖。

解决此问题的最佳方法是将其移至inline styleCSS

.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}

或者，如果您想保留inline style，则添加!important您的 CSS，以便规则覆盖inline规则。

JSFiddle 演示

于 2013-06-21T14:11:37.913 回答
1

向您的跨度添加一个类

<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>

然后在你的 css 中：

.background-switch {
    text-align: center;
    padding: 1em;
    max-width: 250px;
    font-size: 2.2em;
    border-radius: 30px;
    background-color: pink;
}

.random-class {
     color:red;
}

.background-switch:hover,
.background-switch:hover .random-class {
    background-color: lightblue;
    color: white ; 
}
于 2013-06-21T14:11:10.940 回答
0

尝试

.background-switch:hover span {
    color: inherit !important;
}

您需要 !important 来覆盖 span 标签上的内联样式。最好是用类替换内联样式，这样就不需要 !important。

于 2013-06-21T14:10:53.457 回答
0

删除 style="color:red;" 从您的跨度中，然后将以下内容添加到您的 CSS 中：

.background-switch span {
color:red;
}

.background-switch:hover span {
color:white;
}
于 2013-06-21T14:11:53.317 回答
0 
.background-switch span {color: red;}    
.background-switch:hover span {color: #fff;}

从 span 中删除内联样式

于 2013-06-21T14:12:13.537 回答
0

添加这样的东西可能会有所帮助

.背景开关>跨度{颜色：红色；}

.背景开关：悬停>跨度{颜色：白色；}

并删除样式 inline style="color:red;

于 2013-06-21T14:14:04.283 回答
0

由于 CSS 中的选择器优先级，您的代码不起作用。内联样式胜过一切。所以：

<span style="color: red;">忽略其他样式。

向您的跨度添加一个类将解决此问题：

<span class="something">

于 2013-06-21T14:11:22.113 回答