CODEWITHSUNDEEP
javascriptcssdom
Chad
Chad

Reputation: 2455

Delay CSS hover/mouseover effect with JavaScript

I found a very nice image gallery script that uses only CSS here: http://host.sonspring.com/hoverbox/

The only thing keeping me from using it is that the hover effect is too fast. I would like to delay the hover effect by about a second; meaning the image will not enlarge unless you mouseover for a second. How can I do this with JavaScript?

Upvotes: 2

Views: 4243

Answers (2)

Misha Reyzlin
Misha Reyzlin

Reputation: 13896

You could generally use CSS transitions, instead of using JavaScript. You also don't really need to use two images in HTML – you could enlarge images while hovering them and position them with negative margins. You also could get rid of the link tag. So, for a single item of the gallery, from this HTML:

<li> 
  <a href="#">
    <img src="img/photo01.jpg" alt="description" />
    <img src="img/photo01.jpg" alt="description" class="preview" />
  </a> 
</li>

You get to this:

<li>
  <img src="http://host.sonspring.com/hoverbox/img/photo01.jpg" alt="description" />
</li>

And in CSS you do something like this:

.hoverbox img {
    /* 
       in order to uze z-index you need 
       to have position:absolute or relative set
    */
    position:relative;
    background: #fff;
    border-color: #aaa #ccc #ddd #bbb;
    border:1px solid;
    padding: 2px;
    width: 100px;
    height: 75px;
    /*
      CSS3 transition shorthand order:
      transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
      if you don't specify values for transition-property, default is "all"
      if you don't specify values for transition-timing-function, default is linear
    */
    -webkit-transition:.01s 1s;
    -moz-transition:.01s 1s;
    -o-transition:.01s 1s;
    transition:.01s 1s;
}
.hoverbox img:hover {
    z-index:1;
    width:200px;
    height:150px;
    margin:-37px -50px;
    border-color:#000;
}

This won't work in non-modern browsers though :( namely: IE < 10

UPD: Here's what I put together: http://jsfiddle.net/gryzzly/JWk7V/3/

I've updated the script to include a script you could apply to handle this functionality with the same HTML and still use CSS3 with modern browsers: http://jsfiddle.net/gryzzly/JWk7V/4/

Upvotes: 2

David
David

Reputation: 218808

I imagine it can be done in these steps:

  1. Change the CSS provided such that the hidden elements (the "pop-up" images) don't set their display styles on hover. This should be simple enough, there probably aren't a lot of display specifications in the CSS.
  2. Create another CSS class which handles the display property (sets it to block, I imagine).
  3. Using JavaScript, add a handler to the mouseover event for the thumbnail elements. In that event, set your delay and then apply the new CSS class to the target element. (Don't forget to remove that class on mouseout.

I could probably tinker with this a bit to get some kind of proof of concept going if you need. It'll be fairly primitive, though. A few potential hang-ups may include:

  1. Will mouseover still apply when another element is displayed under the cursor? If not, will mouseout be raised or will these elements just stay open once opened?
  2. Selecting the proper element in each case may prove tricky. If we have to much around with HTML structure or element IDs/styles then there could be a good bit more work involved to update the existing CSS to match.

It's an interesting idea, so I'll be glad to give some attention to a prototype. But hopefully just the outline of what may be involved is enough to get you going :)

Edit: Ok, I was more interested in trying this than I thought. I have a prototype here. The hover effect is now handled by jQuery rather than pure CSS. The only thing I haven't added yet is the delay. I'm looking into it.

So far the only things I've changed are the addition of the JavaScript and removing the display property from .hoverbox a:hover .preview in the CSS. That's all.

In the interests of posterity on StackOverflow (and since I never entirely trust jsfiddle to keep things), here's the JavaScript code so far:

$(document).ready(function() {
    $('.hoverbox a').mouseover(function() {
        $(this).children('.preview').show();
    });
    $('.hoverbox a').mouseout(function() {
        $(this).children('.preview').hide();
    });
});

Upvotes: 4

Related Questions