CODEWITHSUNDEEP
htmlcsscss-selectors
Michael Brenndoerfer
Michael Brenndoerfer

Reputation: 4066

CSS Class Attribute Selector with hover

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

Upvotes: 2

Views: 5337

Answers (2)

Issam Zoli
Issam Zoli

Reputation: 2774

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/

Upvotes: 1

BoltClock
BoltClock

Reputation: 723538

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.

Upvotes: 2

Related Questions