圖標可懸停在菜單按鈕時移動

之前，閱讀本，請起牀這個網站，看看有什麼我試圖做的事：圖標可懸停在菜單按鈕時移動

https://www.kris-willis.com

正如你可以看到有位於下方的紅色箭頭菜單以及我試圖實現的是什麼......當我將鼠標懸停在菜單按鈕上時，箭頭移動到同一個按鈕上，而我沒有重新加載頁面。

理想情況下，我希望箭頭移回到默認按鈕..並且還可以在默認按鈕更改，如果點擊不同的菜單按鈕。

如果你知道任何例子等的鏈接，我會非常感激！

謝謝您的時間，

克里X

來源

2012-12-28 Kerry

鏈接上的SSL錯誤... –

@NuclearGhost它會工作，如果你只是鍵入鏈接到您的瀏覽器:) – Kerry

@Snuffleupagus我曾嘗試從頭開始使用JavaScript，但我一直在失敗，所以想知道是否有類似的東西在那裏，我可以學習。 – Kerry

製作的「按鈕」錨。使用CSS集創建:hover的規則來設置包含箭頭的背景圖像。

那裏有很多CSS教程，Nettuts和Webdesigntuts有很多導航文章。或者，如果您對模仿他人感到滿意，可以找到您喜歡的網站，然後挑選出來，直到您弄清楚他們是如何做到的。

請記住，JavaScript並非完全有必要完成您正在做的事情。除非你想要一些動畫，即使這樣CSS可以處理大部分的工作，但我認爲純CSS是更好的方法。

來源

2012-12-28 15:47:27 ryan

只需通過margin-left相對於移動箭頭向左tdDEMO

$("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2});

TP做這個添加jQuery libirary到您的網頁

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

添加的頭部這段代碼放在一個外部的js文件中，並將其添加到頁面的頭部

$(function(){ 
    $("#MenuPosition").on("hover","td",function(){ 
    $("#Arrow").css({"margin-left":$(this).position().left+($(this).width()/2)-2}); 

    }); 

});

編輯：恢復箭頭一部開拓創新的位置使用

$(function(){ 
    currentPos = $("#Arrow").css("margin-left"); 

    $("#MenuPosition").on("hover","td",function(){ 
    $("#Arrow").css({"margin-left":$(this).position().left}); 

    }); 


    $("#MenuPosition").on("mouseout","td",function(){ 

    $("#Arrow").css({"margin-left":currentPos});   
    }); 

});

注：請參閱計算部分並加以糾正。

PS：不能正確的是因爲我的註銷時間從辦公室;）。但我的東西你有邏輯去做

來源

2012-12-28 15:51:44 Champ

有沒有一種方法來設置箭頭的默認按鈕移回到一旦鼠標離開按鈕？ – Kerry

首先是你有一個錯誤的DOCTYPE。

<!DOCTYPE html PUBLIC "">

這會導致您的頁面以怪異模式加載。將其更改爲

<!DOCTYPE html>

爲HTML5或使用完整的一個，包括FSI & FPI。

第二是您正在使用<table>進行導航。沒有什麼嚴重的問題，但人們往往使用ul

對於:hover，你可以簡單地使用

#MenuPosition table tbody tr td:hover 
{ 
background-image: url("/images/Arrow.jpg"); 
}

你可能有paddings和margins播放或可能使用display: block或display: inline-block正確定位箭頭。

來源

2012-12-28 15:52:56 Jawad

http://stackoverflow.com/questions/4416805/what-is-this-css-active-menu-style-with-triangle-called – Jawad

你可以做這樣的事情：

使用跨度添加在HTML中導航/菜單LIS以下BG箭頭：

<ul class="nav"> 
    <li> 
     <a href="#">Menu 1</a> 
     <span class="arrow">&nbsp;&nbsp;</span> 
    </li> 
    <li> 
     <a href="#">Menu 2</a> 
     <span class="arrow">&nbsp;&nbsp;</span> 
    </li> 
</ul>

的CSS：

.nav { 
    font-size: anypx; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

.nav li { 
    background: #whatev; 
    display: block; 
    float: left; 
    height: anypx; 
    line-height: anypx; 
    padding: 0; 
    text-align: center; 
} 

.nav li a { 
    color: #any; 
    display: block; 
    padding: any; 
    position: relative; 
    text-decoration: none; 
    width: auto; 
} 
.arrow { 
    background: url("images/arrow.png") no-repeat scroll 0 9px transparent; 
    display: none; 
    height: anypx; 
    text-indent: -9999px; 
    width: whatevs; 
    z-index: 9999; 
}

最後是使其工作的JS/Jquery：

$(document).ready(function(){  
    Your_menu(); 
}); 

function Your_menu(){ 

    $(".nav li").hover(function(){ 
      $(this).find('.arrow').css({visibility: "visible",display: "none"}).show(); 
     },function(){ 
      $(this).find('.arrow').css({visibility: "hidden"}); 
    }); 

}

這裏是顯示這個:)

http://www.drexelmedicine.org/

來源

2012-12-28 16:08:38 Riskbreaker

純CSS解決方案

檢查這個答案的站點。

Is there any way to hover over one element and affect a different element?

因此，它可能是：

#thething { 
    margin: 0; 
} 
.classone:hover + #thething { 
    margin-top: 10px; 
    margin-left: 10px; 
}

如果他們是在一個父DIV相鄰的兄弟姐妹。

來源

2012-12-28 16:37:18 Plummer

圖標可懸停在菜單按鈕時移動

回答

相關問題