如何将属性选择器用于跨度悬停

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;

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

有人知道我必须修改什么才能使这项工作将这些属性分配给所有子类别类：悬停跨度？

请注意，我无法访问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

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

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

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

Answer 2

从CSS文件中的类名中删除引号

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

我也为您做了一个JSFIDDLE。