Member Avatar for Inny

A freind wants to spice up his menu, (div) to have a border appear on mouseover, stay, then dissappear when the menu is closed. He writes...

Not quite what i wanted. Umm go check the member list here and mouseover a name, then click the name. The border stays on and the menu opens, but when you close the menu, the border goes away, the border also goes away if you mouseover another username. Do you know how to do that?

can sombody advise please? I offered the following, but he says thats not quite what he wants.

if you want the new border to stay you could use example

<div Id="menuItem2_1" onMouseOver="this.style.cssText='margin: 0px; border: solid 1px #00F7FF'">TEST</div>

try it here (mouseover the word TEST) .It really depends what you want.

http://www.jmarshall.com/easy/html/testbed.html

or make it go away again

<style type="text/css">

.menudef {
position: relative;
left : 0px;
padding: 1px;
border-width: 0px;
cursor: hand;
}
.menuOver {
position: relative;
left: -1px;
padding: 1px;
border: 1px #00f7ff solid;
cursor: hand;
}

</style>

<div id="menuItem2_1" class="menudef"
onmouseover="this.className='menuOver'" 
onmouseout="this.className='menudef'">
TEST</div>
  • 2 Contributors
  • 1 Reply
  • 84 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Dani
Member Avatar for Dani

It can be done without JavaScript using the a:hover { } css definition.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.