[英]Simple Css problem for Mouseover
有人可以在CSS中幫助我。 我有文字“精選頁面”。 懸停時(鼠標懸停時),我應該在其右側看到圖片。 目前,當我使用以下CSS時,在文字下方顯示圖片。 我需要它在文本的較大和右側。
我從來沒有在CSS頁面上工作過。所以請不要誤解我。
<style type="text/css">
#Style {
position:absolute;
visibility:hidden;
border:solid 1px #CCC;
padding:5px;
</style>
我的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"
}
}
我的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>
提前致謝!!
您可以設置元素懸停事件的樣式以顯示background
圖像。 您可能需要弄亂margins
才能使其正確顯示
.item
{
border:solid 1px #CCC;
padding:5px;
}
.item:hover
{
background: url(../images/background.png) middle right;
}
嘗試這個:
<style type="text/css">
#mytext {
position: relative;
}
#mytext img {
position: relative;
visibiliy: hidden;
}
#mytext:hover img {
visibility: visible;
}
</style>
和這個HTML:
<p id="mytext">
Some text...
<img src="..." />
</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.