Simplest rollover/hover technique

Question

I'm curious to know what people think is the current best way to go about a basic roll-over action- JQuery or CSS?

I want a roll-over with these states:

• Normal: paragraphs of text within a DIV
• Hover: paragraphs of text fade out, a photograph fades in, in same position as text
• OnMouseOut: photograph fades out, text fades back in.

DIV & photograph are both known sizes.

90% of CSS-only roll-over effects I've found online are specifically for menus, using sprites, which isn't what I'm after, and the other 10% are bickering about whether :hover is good practise.

I am curious what people think is the most straightforward technique these days- least code, least complexity, most compatible.

Without rollover added yet, HTML is similar to this:

<div id="box1">
    <p>Pitchfork photo booth, DIY cardigan messenger bag butcher Thundercats tofu you probably haven't heard of them whatever squid VHS put a bird on it. </p>
</div>

CSS is:

#box1 {
    width:403px;
    height:404px;
    background-image:url('../images/bio_square1.jpg');
    background-repeat:no-repeat;
    color:#fff;
}

Rosalinarosalind

Fading effects aren't very well established into browsers yet, most of them are in testing. – Incomputable

OK- the fading is the least important part of the process, a nice-to-have but not essential. So if it was something that only worked in boutique browsers that would be fine as long as the image-rollover worked in most. – Rosalinarosalind

Answer 1

As others have said, for cross-browser compatibility jQuery is the way to go. But if you want just CSS here's a quick-and-dirty CSS3 option using transitions: http://jsfiddle.net/wkhQA/2/

Edit: Due to laziness, I only included the webkit prefix for transitions. So I guess test it out in Chrome or Safari. Apologies.

Bissau

I'm using this approach for now and it's working well, thank you! – Rosalinarosalind

Answer 2

I would typically resort to jquery if there's a need to fade in/out an element.

My HTML would be something like this:

<div id="box">

   <div class="box-img">

         <img src="image.jpg"/>

   </div>

   <div class="box-text">

         Lorem ipsum

   </div>

</div>

Following that my CSS would go something like:

#box{
   width:500px;
   height:500px;
   padding:0;
}

   .box-img{
       position:absolute;
       opacity:0;
   }

   .box-text{
       position:absolute;
   }

And to end off, I will probably use the jquery library for .mouseover() or .hover():

$("#box").hover(
  function () {
    $(".box-img").fadeTo("100,1");
    $(".box-text").fadeTo("100,0");
  }, 
  function () {
    $(".box-img").fadeTo("100,0");
    $(".box-text").fadeTo("100,1");
  }
);

This may not be the optimal method but I suppose the rough idea behind what is possible is somewhere there.

You can see the .hover() in action at jQuery API. The demo there has a live example of something similar to what you may be looking for and it is employing another method.

Hope this helps! =)

Mallarme

Answer 3

For cross-browser compatibility, jQuery will be the way to go. Furthermore, what you want sounds a bit more complicated than simply changing styles on hover. For example, you are binding the fade in of the photograph to the end of the fade in of the paragraph. There is no way to accomplish this in pure CSS.

Invention