如何使用鼠標懸停來更改CSS形狀的邊框顏色（圓形）？

Question

我想實現這個圓形導航菜單 例如：http://www.jerseywater.je/water/index.html#page_0/

我已經做了幾乎所有的吧！現在 的問題是如何改變與鼠標懸停功能的CSS形狀的邊框 編輯： 「這是當我將鼠標懸停一些其他形狀的邊框顏色將在主循環改變」

#circle { 
 
    width: 120px; 
 
    height: 120px; 
 
    border-radius: 70px; 
 
    box-shadow: 6px 6px 5px #888888;  
 
    -moz-border-radius: 70px; 
 
    -webkit-border-radius: 70px; 
 
    border: 4px solid #73AD21; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    margin-top:-60px; 
 
    margin-left:-50px; 
 
    background: transparent; 
 
}

<div id="circle"> 
 
    <p id="content"> 
 
     Blah Blah 
 
    </p> 
 
</div>

Answer 1

$(document).ready(function(){ 
    $("#circle") 
    .mouseenter(function() { 
    $(this).css("border","black solid 1px"); 
    }) 
    .mouseleave(function() { 
    $(this).css("border","red solid 1px"); 
    }); 
}); 

事情是這樣的：jsFiddle？

Answer 2

在CSS中使用:hover例如：可以在這裏找到

#circle:hover { 
    border: 10px solid black; 
} 

更多細節：http://www.w3schools.com/cssref/sel_hover.asp

Answer 3

#circle:hover { 
    border-color: pink; 
} 

Answer 4

這是你可能要達到什麼樣的一個例子：

http://codepen.io/TunderScripts/pen/ZBBdBM

HTML

<div class="container"> 
    <div class="main_circle"> Look</div> 
    <div class="menu_items item1">Menu Item 1</div> 
    <div class="menu_items item2">Menu Item 2</div> 
    <div class="menu_items item3">Menu Item 3</div> 
    <div class="menu_items item4">Menu Item 4</div> 
</div> 

CSS

* { 
    box-sizing: border-box; 
} 

.container { 
    width: 600px; 
    height: 600px; 
    border: 2px solid blue; 
    position: relative; 
    margin: 40px auto; 
} 

.main_circle { 
    position: absolute; 
    top: 50%; 
    display: block; 
    left: 50%; 
    width: 80px; 
    height: 80px; 
    border-radius: 100%; 
    border: 2px solid red; 
    padding: 25px 20px; 
    transform: translate(-50%, -50%) rotate(0deg); 
    background: blue; 
    z-index: 100; 
} 

.main_circle:before { 
    content: ""; 
    height: 25px; 
    width: 30px; 
    display: block; 
    border: 2px solid red; 
    border-radius: 40px; 
    position: absolute; 
    float: left; 
    top: -10px; 
    z-index: 5; 
} 

.menu_items { 
    position: absolute; 
    height: 80px; 
    width: 80px; 
    border-radius: 100%; 
    border: 2px solid green; 
    padding: 17px; 
    display: block; 
} 

.item1 { 
    top: 20px; 
    left: 250px; 
} 

.item2 { 
    top: 260px; 
    right: 20px; 
} 

.item3 { 
    bottom: 20px; 
    left: 250px; 
} 

.item4 { 
    top: 260px; 
    left: 20px; 
} 

和js

var menuItems = $('.menu_items').length; 
var step = 360/menuItems; 

$('.menu_items').on('mouseover' , function(){ 
    var classList = $(this).attr('class'); 
    var identifier = classList.split(' ')[1].substr(4,1); 

    var calc = (parseInt(identifier) - 1) * step; 
    var transform = 'translate(-50%, -50%) rotate(' + calc + 'deg)'; 
    console.log(transform); 
    $('.main_circle').css('transform', transform); 
}); 

如果增加菜單項的數量，用css重新定位它們，js仍然可以工作。像我對item＃（number）所做的那樣命名類，它應該可以工作。玩的開心。