将悬停效果覆盖在链接列表上

Question

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

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

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

Link to website

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后使用火虫为演示创建了红色边框。