鼠标悬停的简单 CSS 问题答案

【问题标题】：Simple Css problem for Mouseover鼠标悬停的简单 CSS 问题
【发布时间】：2010-12-07 13:37:39
【问题描述】：

有人可以在 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>

提前致谢！！

【问题讨论】：

你的 CSS 坏了。为什么你称那个元素为“风格”？
1.这根本不应该工作，因为没有} 2. 发布 HTML 或者我们只能猜测。
我已经添加了我的 html 和 javascript。请看一下@naugtur
这里给出的两个答案都已经表明了这样做的好方法。抱歉，您的代码不是应该如何完成的。摆脱这个 JavaScript 部分并采用其中一种解决方案。这里不需要 Javascript。

标签： c# javascript html css

【解决方案1】：

您可以设置元素悬停事件的样式以显示background 图像。您可能需要弄乱margins 才能让它正确显示

.item 
{ 
    border:solid 1px #CCC; 
    padding:5px;
}

.item:hover
{
    background: url(../images/background.png) middle right;
}

【讨论】：

【解决方案2】：

试试这个：

<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>

【讨论】：