CODEWITHSUNDEEP
htmlcssbackground-imagepseudo-class
Patrick K
Patrick K

Reputation: 47

How to style a div with background images using pseudoclasses :active :visited :hover?

I got 4 divs and want to style them like this:

http://jsfiddle.net/AcvbG

HTML:

<a href="http://test" id="topleftbox"></a>

CSS:

#topleftbox {
  background: red;
  background-repeat: no-repeat;
  width: 229px;
  height: 228px;
  float: left;
  }

 #topleftbox:hover {
  background: blue;
  }

 #topleftbox:active {
  background: green;
  }

 #topleftbox:visited {
  background: yellow;
  }

But replace the colors with background images. The :hover works, but :visited and :actived arent taking effect.

Anyone knows the solution? I got limited knowledge in javascript so i hope there is a way to work around this.

Upvotes: 0

Views: 555

Answers (2)

Daveable
Daveable

Reputation: 53

In modern browsers, CSS can handle what you want without the use of javascript.

http://jsfiddle.net/CWkdY/10/

One thing to notice is that your identifier could benefit from discerning that your ID is a link by adding 'a' in front of your id declaration. Also your initial definition would benefit from 'display:block'. Like this:

a#topleftbox {
  background: url('http://d241yswl6yg9sc.cloudfront.net/linen-texture2/top-new.jpg');
  width: 229px;
  height: 228px;
  float: left;
  display:block;
  }

If you notice your images are initially not showing, try caching all the images you need to use with this little trick. Where you have a div with all the images, off the the side, but hidden.

http://perishablepress.com/css-image-caching/

Upvotes: 0

Milche Patern
Milche Patern

Reputation: 20452

Your :visited and :actived pseudo class wont be visible within jsFiddle since the href="http://test". So, you need to visit the page test to see :visited in action .. AND you need to be on test page to see :active in action.

Here i made a fiddle for you

You can see where .css differs

.topleftbox:hover {
    background: blue;
}
.topleftbox:visited {
    background: yellow;
}
.topleftbox:visited:hover {
    background: pink;
}
.topleftbox:active {
    background: green;
}

Also, you should give a check to the ORDER in witch you define your styling.

a:link { color: red } /* unvisited links */

a:visited { color: > blue } /* visited links */

a:hover { color: yellow } /* user hovers */

a:active { color: lime } /* active links */

Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

An example of combining dynamic pseudo-classes:

a:focus { background: yellow } a:focus:hover { background: white }

The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.

Upvotes: 2

Related Questions