Question

这是不可能的还是我有语法错误？

我尝试了多种方式，但没有任何效果。

我有一些div使用类works1，works2等等。

我希望定义一般的悬停效果，但结果是，当我尝试将其设为“通用”时，没有任何反应

这是我的方法，任何提示？

div[class^="works"]:hover {
  cursor: pointer;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

这些类的使用方式如下：

<div class="item col-lg-2 col-md-3 col-sm-4 col-xs-12 java works1"></div> 。。

Answer 1

此处的问题是，您的works1课程出现在class属性的最开头之外的其他位置，因此您的属性选择器将无效。

您可以将类名移动到属性值的前面，或者为元素提供一个公共类，以便您可以使用常规类选择器。

或者，如果您根本无法修改HTML，请改用它（但我强烈建议您更改标记）：

div[class*=" works"]:hover {
  cursor: pointer;
  -webkit-filter: grayscale(0);
  filter: grayscale(0);

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

请参阅here以获取解释。

Answer 2

它是work*属性中class的位置，使用*代替^这里是一个例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="works1">1</div>
<div class="works2 qq">2</div>
<div class="aa works3">3</div>
<div class="aa works3 qq">4</div>
</body>
</html>

CSS：

div[class*="works"]:hover {
  background: green;
}

http://jsbin.com/lowamalu/1/

带有悬停的CSS类属性选择器

2 个答案: