css鼠标框颜色设置颜色,如何使用鼠标悬停来更改CSS形状的边框颜色（圆形）？...

这是你可能要达到什么样的一个例子：

HTML

Look

Menu Item 1

Menu Item 2

Menu Item 3

Menu Item 4

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)所做的那样命名类，它应该可以工作。玩的开心。