CSS Class Attribute Selector with hover

Problem

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

Problem courtesy of: Michael

Solution

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.

Solution courtesy of: BoltClock

Discussion

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/

Discussion courtesy of: Issam Zoli

This recipe can be found in it's original form on Stack Over Flow.