mouseover透明div類顯示圖像

我被困在這個很長..希望有人可以幫助我，因爲我不熟練使用Javascript。mouseover透明div類顯示圖像

的情況是這樣的：

我使用WordPress的，並在一個頁面上，我有一個大的圖片（800像素X 1200像素），在它的蛋糕。

我希望能達到的效果是這樣的;當用戶將鼠標懸停在特定的蛋糕上時（有一層透明的div），會出現一個圖像（320px x 320px）。

我試過使用css：hover，它適用於safari，chrome和firefox。但對於IE來說，它不起作用。因此，我想使用JavaScript來操縱的div類而不是的onmouseover和的onmouseout事件

PHP/HTML：

<div id="f1"></div>

CSS：

#f1{ 
width: 100px; 
height: 50px; 
left: 370px; 
top: 450px; 
position: absolute; 
opacity:0; 
}

所以當用戶將鼠標懸停在透明div上時，我想要一個圖像（320像素x 320像素）出現。

非常感謝！

來源

2012-09-24 Rui He Zhengrui

看看http://jquery.com/ –

你試圖隱藏的div使用'visibility：hidden的;'而不是不透明的？ IE不支持不透明。 –

我已經試過..它不工作！ –

:hover在IE7 +中受支持，但可能存在其他問題，如錯誤或不支持，如opacity或hasLayout問題。

你可以做到這一點的javascript：

var div = document.getElementById('f1'); 
div.onmouseover = function() { 
    div.className += ' hover'; 
}; 
div.onmouseout = function() { 
    div.className = div.className.replace(/\shover/,''); 
}

或者jQuery的：

$('#f1').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
});

將鼠標懸停時在hover類添加到元素，所以你可以風格它，f.ex：

#f1.hover{ background:url(path/to/img.jpg); };

來源

2012-09-24 11:13:27 David

嗨大衛，它似乎甚至沒有出現，這裏的鏈接來看看它。 http://mojogobbles.com.sg/cupcake-menu/ 我很困惑..你能告訴我那裏有什麼問題嗎？ –

因爲你可以使用IE過濾器。像這樣寫：

#f1{ 
width: 100px; 
height: 50px; 
left: 370px; 
top: 450px; 
position: absolute; 
opacity:0; 
filter: alpha(opacity=0); 
}

來源

2012-09-24 11:14:08 sandeep

是篩選條件：alpha（opacity = 0）;工作正常 –

我相信它的工作原理，但是我只是意識到div類沒有出現在IE中，請查看http://mojogobbles.com.sg/cupcake-menu/ –

如果你想圖像出現在第二個div outter＃F1 DIV試試這個

DEMO 1

或要顯示的圖像作爲F1的div的背景圖片試試這個

DEMO 2

來源

2012-09-24 16:45:21 Afshin

試試這個：每鏈接附加的縮略圖，並使其disp已lay：none然後通過jQuery .hover（）使其顯示並隱藏。

<html> 
<head> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <style> 
    .lsr { 
     width: 10px; 
     height: 10px; 
     background-color: #000; 
    } 

    #lsr { 
     display: none; 
    } 
} 
 
    </style> 

</head> 
<body> 
<div class="lsr" id="img1"><a href="#"><img src="http://pbskids.org/itsmylife/images/teststress1.gif" alt="img" ></a></div> 

<div id="lsr"> 
    <img src="http://web.scott.k12.va.us/martha2/dmbtest.gif" id="img1" > 
</div> 
<script> 
    $("div.lsr a").hover(
     function() { $("#lsr").show(); }, 
     function() { $("#lsr").hide(); } 
    ); 
</script> 

</body> 
</html>

來源

2012-10-23 06:56:07 brightboy2004

mouseover透明div類顯示圖像

回答

相關問題