jquery - 悬停在链接列表上的效果

Question

我有一个项目列表，每当我将箭头悬停时，这些项目都会使用 jcarousel 向上或向下滚动。项目列表具有需要链接的链接。

这就是我想要实现的目标：我需要扩展箭头的悬停区域，以便一旦光标位于彩色区域中，列表就会滚动。我只需更改箭头的大小（它们是绝对定位的）并将它们放在列表的顶部就可以轻松实现这一点，但我的问题是我无法让我的链接工作，因为箭头容器就在它们的顶部。

编辑：我打算做一个小提琴，但它似乎不适用于 jcarousel。这是我到目前为止所拥有的：

链接到网站

Answer 1

正如您所注意到的，问题在于重叠元素正在吞噬鼠标事件，因此实际列表项无法悬停/单击等。

您可以mouseover在列表元素的容器上使用并检查鼠标是在它的上半部分还是下半部分。

我的工作测试是

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

但是您需要使箭头元素不与元素重叠div.listaterm。当然，也可以从箭头中删除悬停处理程序..

Answer 2

您的插件 html 代码应如下所示

<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：

你应该在你的样式表中添加css

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

第 213 行：http: //gestyre.com/new/wp-content/themes/gestyre/css/app.css

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

请参见下图，其中我在应用上述 css 后使用 fire bug 为演示创建了红色边框。