如何使用鼠标悬停改变css形状(圆圈)的边框颜色

How to use mouseover to change border color of a css shape(circle)?

本文关键字：圆圈 边框 颜色 形状 鼠标 何使用 悬停 改变 css      更新时间：2023-09-26

我正在尝试实现这个圆形导航菜单示例: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>

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

像这样:jsFiddle ?

这是一个您可能想要实现的示例:

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)，应该可以工作。获得乐趣。

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

在css中使用:hover eg:

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

更多详细信息请访问:http://www.w3schools.com/cssref/sel_hover.asp

相关文章：