Question

我为类分配了以下唯一属性：

.subcategory1:hover span { background: url(entertainment-hover.png); }

我有很多这样的子类别，我想为:hover span分配额外的一般属性，我想出了以下内容：

[class*="subcategory"]:hover span {
  background-size: 20px; 
  background-repeat: no-repeat;
  background-position: 0px 2px;

但它不起作用，我找不到问题！

有没有人知道我需要修改什么才能使这项工作将这些属性分配给所有子类别：hover for span？

请注意，我无法访问HTML代码！

修改

[class*=subcategory]:hover span{
  background-repeat: no-repeat !important;
    background-size: 20px !important; 
  }
  
  
.subcategory1:hover span{ 
  background: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
}

<div class="subcategory1">
    <span style="font-size: 100px;">I am in a mess</span>
  </div>

Answer 1

您可以将另一个类添加到要在悬停它时添加效果的当前类例如

＆＃13;

.hover-effect:hover span {
/*
your CSS code
*/
}

＆＃13;

<div class="subcategory1 hover-effect">
<span>text</span>
</div>
<div class="subcategory2 hover-effect">
<span>text</span>
</div>
<div class="subcategory3 hover-effect">
<span>text</span>
</div>
<div class="subcategory4 hover-effect">
<span>text</span>
</div>

＆＃13;

Answer 2

从css文件中的类名中删除引用

[class*=subcategory]:hover span {
  background-size: 20px; 
  background-repeat: no-repeat;
  background-position: 0px 2px;
}

我也为你做了jsfiddle。

如何使用跨度悬停的属性选择器

2 个答案: