Simple Css problem for Mouseover
Could someone help me in CSS. I have text "Featured Page". On hovering(on mouseover), i should see a picture on its right. Currently i get a picture under the text when i use the following Css. I need it bigger and right side of the text.
I have never worked on a css page.. So please don't take me wrong.
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
</style>
My javascript is :
<script language="javascript" type="text/javascript">
function ShowPicture(id,Source) {
if (Source=="1"){
var pos = $('' + 开发者_如何学编程id+'').offset();
var width = $('' + id+'').width();
var popupHeight = $(''+id+'').height();
if (document.layers) document.layers(''+id+'').visibility = "show"
else if (document.all) document.all[''+id+''].style.visibility = "visible"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
$(''+id+'').css( { "left": (pos.left - width - 272) + "px", "top": (pos.top - popupHeight + 5) + "px" } );
}
else
if (Source=="0"){
if (document.layers) document.layers(''+id+'').visibility = "hide"
else if (document.all) document.all[''+id+''].style.visibility = "hidden"
else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"
}
}
My html is
<td valign="middle" class="table_td td top" style="width: 347px"> <span class="feature_text" style="cursor:pointer;" onmouseover="ShowPicture('Style',1)" onmouseout="ShowPicture('Style',0)" id="a1"> Featured Merchant Ad </span><br /> </td>
<div id="Style"><img src=""></div>
Thanks in advance!!
You could style the elements hover event to show a background
image. You'll probably need to mess with the margins
to get it to show up just right
.item
{
border:solid 1px #CCC;
padding:5px;
}
.item:hover
{
background: url(../images/background.png) middle right;
}
Try this:
<style type="text/css">
#mytext {
position: relative;
}
#mytext img {
position: relative;
visibiliy: hidden;
}
#mytext:hover img {
visibility: visible;
}
</style>
And this HTML:
<p id="mytext">
Some text...
<img src="..." />
</p>
精彩评论