如何使用鼠标悬停来更改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）所做的那样命名类，它应该可以工作。玩的开心。