The simplest rollover / hover method

Question

I am curious to know what people think is the best way to start a basic transition action - jQuery or CSS?

I want to flip with these states:

• Normal: paragraphs of text in a div
• Guidance: text paragraphs disappear, photo disappears, in the same position as the text
• OnMouseOut: The photo disappears, the text disappears.

DIV and photography are both known sizes.

90% of CSS-only skins that I found on the Internet are specifically designed for menus using sprites, which is not what I need, and the remaining 10% argue whether hover is good practice.

I'm curious that people think this is the easiest method these days - the smallest code, the smallest complexity, the most compatible.

Until rollover is added, the 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:

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

Answer 1

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

Edit: due to laziness, I only included the webkit prefix for transitions. Therefore, I think check it out in Chrome or Safari. I apologize.

Answer 2

I usually resort to jquery if there is a need to fade in / out of an element.

My HTML will be something like this:

 <div id="box"> <div class="box-img"> <img src="image.jpg"/> </div> <div class="box-text"> Lorem ipsum </div> </div> 

After that, my CSS will look something like this:

 #box{ width:500px; height:500px; padding:0; } .box-img{ position:absolute; opacity:0; } .box-text{ position:absolute; } 

And to finish, 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 best method, but I guess the rough idea of ​​what's possible is somewhere out there.

You can see the .hover () action in the jQuery API . There is a live example in the demo of what looks like what you can search for and uses a different method.

Hope this helps! =)

Answer 3

To be compatible with multiple browsers, jQuery will be your way. Also, what you want sounds a bit more complicated than just changing styles on hover. For example, you snap a photo attenuation to the end of a paragraph attenuation. Unable to execute this in pure CSS.