[SOLVED] onmouseover()

[sandy1028]

How to hide the orange tooltip. It should be displayed only when mouse over the text in li

 

[syntax="css"]
<style type="text/css">
.roundcont {
        width: 250px;
        background-color: #f90;
        color: #fff;
}
.roundcont p {
        margin: 0 10px;
}
.roundtop {
        background: url(tr.gif) no-repeat top right;
}
.roundbottom {
        background: url(br.gif) no-repeat top right;
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}

</style>
[/syntax]

[syntax="javascript"]
<script>
function showdiv(){
var tip;
tip = document.getElementById("one");
tip.style.display ="block";
}

function hidediv(){
var tip;
tip = document.getElementById("one");
tip.style.display ="none";
}

</script>
[/syntax]





[syntax="html"]
<div id="one">
<li onMouseOver="javascript:showdiv(); onMouseOut="hidediv();>--Somename
<div class="roundcont">
   <div class="roundtop">
         <img src="tl.gif" width="15" height="15" class="corner"  style="display: none" />
   </div>

<p> On mouse over</p>
      <div class="roundbottom">
         <img src="bl.gif" width="15" height="15" class="corner" style="display: none" />
      </div>
   </div>
</li>
</div>
</div>
[/syntax]

[ToonMariner]

better to use a tags and then you can do this without js...

 

<div id="one">
<a href="#" class="tootip">--Somename
<div class="roundcont">
   <div class="roundtop">
         <img src="tl.gif" width="15" height="15" class="corner"  style="display: none" />
   </div>

<p> On mouse over</p>
      <div class="roundbottom">
         <img src="bl.gif" width="15" height="15" class="corner" style="display: none" />
      </div>
   </div>
</a>
</div>
</div>

 

the css

 

.roundcont {
        width: 250px;
        background-color: #f90;
        color: #fff;
}
.roundcont p {
        margin: 0 10px;
}
.roundtop {
        background: url(tr.gif) no-repeat top right;
}
.roundbottom {
        background: url(br.gif) no-repeat top right;
}
img.corner {
   width: 15px;
   height: 15px;
   border: none;
   display: block !important;
}
// THE NEW STUFF

a tooltip
{
position: relative;
}

a.tooltip div.roundcont
{
display: none;
}

a:hover.tootip div.roundcont
{
display: block;
position: absolute;
top: 0;
left: 0;
}

 

have fun

 

 

[sandy1028]

Hi,

 

The orange rounded image should show only when mouseover the somename

[sandy1028]

How to display the div block only display when onmouseover the Somename in the li tag.