CSS Class Attribute Selector with hover

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

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

score 2 · Accepted Answer · edited May 23 '17 at 11:57

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.

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

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.

Ah thanks for the clarification. I will move the works classes to the front. Using the * also worked. — Michael Brenndoerfer, Jul 27 '14 at 01:06

score 1 · Answer 2 · answered Jul 27 '14 at 01:06

It's the position of the work* in the class attribute, use * instead of ^ here is an example

<!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 Class Attribute Selector with hover

2 Answers2