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

Question

is this not possible or do I have a syntax error? 这是不可能的还是我有语法错误？

I've tried it multiple ways, but nothing worked. 我尝试了多种方式，但没有任何效果。

I have some divs using the classes works1 , works2 , etc.. 我有使用类一些div works1 ， works2 ，等等。

and I want to define a general hover effect, but the result is, that exactly nothing happens when I try to make it "general" 我想要定义一般的悬停效果，但结果是，当我试图让它“一般”时，没有任何反应

This is my approach, any hints? 这是我的方法，任何提示？

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

The classes are used like this: 这些类使用如下：

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

Answer 1

The problem here is that your works1 class appears somewhere other than the very start of the class attribute, so your attribute selector won't work. 这里的问题是你的works1类出现在class属性的最开头之外的某个地方，所以你的属性选择器将不起作用。

You can either move the class name to the front of the attribute value, or give your elements a common class so you can use a regular class selector. 您可以将类名移动到属性值的前面，或者为元素提供一个公共类，以便您可以使用常规类选择器。

Or, if you can't modify your HTML at all, use this instead (but I would strongly recommend changing your markup if you can): 或者，如果您根本无法修改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;
}

See here for an explanation. 请看这里的解释。

Answer 2

It's the position of the work* in the class attribute, use * instead of ^ here is an example 它是class属性中work*的位置，使用*代替^这里是一个例子

<!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: CSS：

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

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

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-07-27 01:03:16

解决方案2
1 2014-07-27 01:06:14

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-07-27 01:03:16

解决方案2 1 2014-07-27 01:06:14

解决方案1
2 已采纳 2014-07-27 01:03:16

解决方案2
1 2014-07-27 01:06:14