對鏈接列表的懸停效果

我有一個項目列表，當我將鼠標懸停在箭頭上時，它們將與一個jcarousel向上或向下滾動。項目列表包含需要鏈接的鏈接。對鏈接列表的懸停效果

My list of items

這就是我想要達到的目標：我需要延長箭頭的懸停區域，以便當光標在彩色區域列表將盡快滾動。我很容易實現這一點，只是改變箭頭的大小（它們是絕對定位的）並將它們放在列表的頂部，但我的問題是我無法讓我的鏈接工作，因爲箭頭容器就在它們之上。

the hover areas

編輯：我打算做一個小提琴，但它似乎沒有用的jCarousel工作。這是我到目前爲止有：

Link to website

來源

2012-12-28 Elaine Marley

請顯示驗證碼或鏈接 –

它很容易做到這一點，但請提供您的代碼爲NullPointer說.. – w3uiguru

@Elaine Marley看到我的答案，讓我知道如果我在某些地方滯後。 – w3uiguru

正如您所注意到的問題是重疊的元素吃鼠標事件等實際列表項不能懸停/點擊等。

你可以在使用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元素。當然，從箭頭刪除懸停處理程序以及..

來源

2012-12-28 19:10:50

如果您需要任何幫助/解釋代碼，讓我知道.. –

是的，這工作太棒了，和解決方案其實很聰明，謝謝:) –

插件的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 
}

line 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爲演示創建了紅色邊框。

enter image description here

來源

2012-12-28 18:34:08 w3uiguru

問題不是關於定位箭頭，而是關於他們的功能與點擊列表上的鏈接的能力衝突 –

對鏈接列表的懸停效果

回答

相關問題