CODEWITHSUNDEEP
jqueryhtmlcssrollover
Ila
Ila

Reputation: 3538

Simplest rollover/hover technique

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:

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;
}

Upvotes: 6

Views: 750

Answers (3)

DuMaurier
DuMaurier

Reputation: 1211

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.

Upvotes: 0

scornork
scornork

Reputation: 1369

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! =)

Upvotes: 2

maxedison
maxedison

Reputation: 17553

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.

Upvotes: 0

Related Questions