Simple problème Css pour Mouseover

Question

Quelqu'un pourrait-il m'aider en CSS. J'ai un texte "Page en vedette". Sur le vol stationnaire (sur mouseover), je devrais voir une image sur sa droite. Actuellement, je reçois une image sous le texte lorsque j'utilise le Css suivant. J'en ai besoin plus grand et à droite du texte.

Je n'ai jamais travaillé sur une page css .. Donc s'il vous plaît ne me prenez pas mal.

<style type="text/css"> 
#Style { 
position:absolute; 
visibility:hidden; 
border:solid 1px #CCC; 
padding:5px; 
</style> 

Mon javascript est:

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

Mon html est

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

Merci à l'avance !!

Answer 1

Vous pouvez définir l'événement de survol d'éléments pour afficher une image background. Vous aurez probablement besoin de jouer avec la margins pour le faire apparaître juste

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

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

Answer 2

Essayez ceci:

<style type="text/css"> 
#mytext { 
position: relative; 
} 

#mytext img { 
position: relative; 
visibiliy: hidden; 
} 

#mytext:hover img { 
visibility: visible; 
} 
</style> 

Et ce HTML:

<p id="mytext"> 
Some text... 
<img src="..." /> 
</p>