마우스 오버에 대한 간단한 CSS 문제

누군가 CSS에서 나를 도울 수 있습니까? 나는 "추천 페이지"라는 텍스트를 가지고있다. 마우스 오버시 마우스 오버시 오른쪽에 그림이 표시됩니다. 현재 나는 아래의 CSS를 사용할 때 텍스트 아래 사진을 얻습니다. 텍스트의 더 크고 오른쪽이 필요합니다.마우스 오버에 대한 간단한 CSS 문제

나는 CSS 페이지에서 일한 적이 없다. 그래서 제발 나를 잘못 받아 들여서는 안됩니다.

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

내 자바 스크립트는 다음과 같습니다

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

감사입니다!

출처

2010-12-07 Ram

귀하의 CSS가 끊어집니다. 그리고 왜 그 요소를 "스타일"이라고 부릅니까? – thejh

1.'}'이 없기 때문에 이것은 전혀 작동하지 않아야합니다. 2. HTML을 게시하거나 추측 할 수 있습니다. – naugtur

내 html과 javascript를 추가했습니다. 제발 그것을보십시오 @naugtur – Ram

요소 호버 이벤트의 스타일을 지정하여 background 이미지를 표시 할 수 있습니다. 당신은 아마 그것이 바로

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

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

출처

2010-12-07 13:43:04 hunter

이 시도 나타나기를 얻기 위해 margins으로 엉망이 필요합니다 :

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

출처

2010-12-07 13:44:51 thejh

마우스 오버에 대한 간단한 CSS 문제

답변

관련 문제