Change link to pointer div
Modern browsers
In modern browsers, you can use the pseudo class :hover
in our selector. Consider the following markup as an example:
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
<a href="#" title="Delete">Delete Item</a>
</div>
</div>
By default, we want to .adminControls
be hidden. They should, however, become visible as soon as the user hovers over the element .item
:
.item .adminControls {
display: none;
}
.item:hover .adminControls {
display: block;
}
JavaScript and jQuery
If you are using jQuery , you can easily do this using the $ .hover () method. If you are using Prototype, you can get the protoHover plugin to achieve the same result, or by viewing this blog post .
$("div.item").hover(
function () { $(this).find(".adminControls").show(); },
function () { $(this).find(".adminControls").hide(); }
);
This will produce a show / hide effect for the following:
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
<a href="#" title="Delete">Delete Item</a>
</div>
</div>
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
<a href="#" title="Delete">Delete Item</a>
</div>
</div>
<div class="item">
<p>This is a long string of text</p>
<div class="adminControls">
<a href="#" title="Delete">Delete Item</a>
</div>
</div>
source to share
Place the link the way you want it to appear on hover, then hide it with JavaScript and use an event onmouseover
to show it. (i.e. it display: none;
and then goes into display: block;
when the event fires onmouseover
).
Something like that:
window.onload = function(){
document.getElementById('mylink').style.display = 'none';
document.getElementById('mydiv').onmouseover = function(){
document.getElementById('mylink').style.display = 'block';
}
}
source to share
You need to write a Javascript function that manipulates the DOM, and you need to bind the OnMouseOver attribute of your HTML element to that function. For example, on my home page, my face image changes every time the mouse rolls over it. The Javascript function is defined on the HTML page itself.
<script type="text/javascript">
<!--
faceCnt = 7;
var faces = new Array( faceCnt );
var faceDates = new Array( "1982", "1986", "1991", "1999", "2004", "2006", "2009" );
var faceIdx = 7; /* So that first change is to earliest one. */
for( var idx = 0 ; idx < faceCnt ; idx++ )
(faces[idx] = new Image(150, 116)).src = "david/david" + (idx + 1) + ".jpg";
function nextFace( ref )
{
faceIdx = faceIdx >= faceCnt - 1 ? 0 : faceIdx + 1;
ref.src = faces[ faceIdx ].src;
ref.title = "David-" + faceDates[ faceIdx ];
}
//-->
</script>
<img id="myface" src="david/david7.jpg" alt="david" title="David-2009"
width="150" height="116"
style="margin: 0 0 5px 15px; /* -10px -5px 10px 10px; */
padding: 0;
border: solid black;
border-width: 1px;
float: right;"
onMouseOver="nextFace( this )"
onClick="nextFace( this )" >
source to share