CODEWITHSUNDEEP
jqueryhtmlcss
Elaine Marley
Elaine Marley

Reputation: 2243

Hover effect over a list of links

I have a list of items that will scroll up or down with a jcarousel whenever I hover the arrows. The list of items has links that need to be linked.

My list of items

This is what I want to achieve: I need to extend the hover area of the arrows so that the list will scroll as soon as the cursor is in the colored area. I achieve this easily just changing the size of the arrows (they are absolute positioned) and having them on top of the list but my problem is that I can't get my links to work because the arrows containers are just on top of them.

the hover areas

Edit: I was going to make a fiddle but it didn't seem to work with jcarousel. This is what I have so far:

Link to website

Upvotes: 0

Views: 574

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

As you noticed the problem is that the overlapping element is eating the mouse events and so the actual list items cannot be hovered/clicked etc..

You could use mouseover on the container of the list elements and check if the mouse is at the top or bottom half of it..

My working test is

var state = '';
$('div.listaterm').mousemove(function(e){
    var self = $(this),
        position = self.offset(),
        height = self.outerHeight(),
        mouse = e.pageY-position.top,
        inTopHalf = mouse <= (height/2),
        sign = inTopHalf ? '-' : '+';

    if (sign != state){
        state = sign;
        jQuery('.jcarouselcall').jcarouselAutoscroll('stop');
        jQuery('.jcarouselcall').jcarouselAutoscroll({'target': sign+'=1'});
        jQuery('.jcarouselcall').jcarouselAutoscroll('start');
    }
}).mouseout(function(e){
    if (!$(this).find(e.relatedTarget).length && !(e.relatedTarget == this)){
        state='';
        jQuery('.jcarouselcall').jcarouselAutoscroll('stop');
    }
});

But you need to make the arrow elements not overlap the div.listaterm element. And of course remove the hover handlers from the arrows as well..

Upvotes: 1

w3uiguru
w3uiguru

Reputation: 5895

your html code of plugin should be like below

<a href="#" class="startscroll"><img style="margin-top:60px" src="http://gestyre.com/new/wp-content/themes/gestyre/images/down.png" alt="arriba"></a>

<a href="#" class="stopscroll"><img alt="arriba" src="http://gestyre.com/new/wp-content/themes/gestyre/images/up.png"></a>

Css:

you should add the css in your stylesheet

.startscroll img
{
   margin-top:60px; // it shifting the down arrow image to the border side
}

line 213 : http://gestyre.com/new/wp-content/themes/gestyre/css/app.css

.startscroll, .stopscroll {
    border: 1px solid red;
    height: 157px;
    position: absolute;
}

see below image in which i created the border with red color for demo using fire bug after applying the above css.

enter image description here

Upvotes: 0

Related Questions