Question

我正在尝试实现此圆形导航菜单例如：http://www.jerseywater.je/water/index.html#page_0/

我几乎完成了所有这些！现在的问题是如何使用鼠标悬停功能更改CSS形状的边框编辑：＆＃34;当我悬停其他一些形状时，边框颜色会在主圆圈中改变＆＃34;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

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

Answer 3

这是您可能希望实现的一个示例：

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仍然有用。像我使用项目＃（数字）一样命名类，它应该工作。玩得开心。

Answer 4

在css中使用WITH pred_vals AS (SELECT SUBSTR('07052620', 1, LENGTH('07052620') + 1 - LEVEL) str, LEVEL priority FROM dual CONNECT BY LEVEL <= LENGTH('07052620')), main_join AS (SELECT fi.subscriber_num, fi.subscriber_status, fi.p_id row_number() OVER (ORDER BY pv.priority) rn FROM c_s_forward_info fi INNER JOIN pred_vals pv ON (fi.subscriber_num = pv.str) WHERE scp_ver = 1) SELECT subscriber_num, subscriber_status, p_id FROM main_join WHERE rn = 1;例如：

:hover

可在此处找到更多详细信息：http://www.w3schools.com/cssref/sel_hover.asp

如何使用鼠标悬停来改变CSS形状（圆圈）的边框颜色？

4 个答案: