mouseoverを使用して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>

「私は他の形状を置くと、境界線の色がメインのサークルに変更されますです」 CSSの使用では

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

: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は引き続き動作します。私はアイテム＃（番号）で行ったようにクラスに名前を付けてください。楽しむ。