[英]Simple Css problem for Mouseover
Could someone help me in CSS. 有人可以在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.
目前,当我使用以下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. 我从来没有在CSS页面上工作过。所以请不要误解我。
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
</style>
My javascript is : 我的JavaScript是:
<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 我的HTML是
<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. 您可以设置元素悬停事件的样式以显示
background
图像。 You'll probably need to mess with the margins
to get it to show up just right 您可能需要弄乱
margins
才能使其正确显示
.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: 和这个HTML:
<p id="mytext">
Some text...
<img src="..." />
</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.