Pratirup Mukherjee Pratirup Mukherjee - 15 days ago 6
Javascript Question

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

I am trying to achieve this circular navigation menu
example : http://www.jerseywater.je/water/index.html#page_0/

I have done almost all of it!
the problem now is how to change a border of a css shape with mouseover function
edit:
"that is when i hover some other shape the border color will change in the main circle"



#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
$(document).ready(function(){
    $( "#circle" )
  .mouseenter(function() {
    $( this ).css("border","black solid 1px");
  })
  .mouseleave(function() {
    $( this ).css("border","red solid 1px");
  });
});

Something like this: jsFiddle ?

Comments