JQuery鼠標懸停圖像覆蓋

只是想知道我如何能100％正確地工作。我想我快到了。JQuery鼠標懸停圖像覆蓋

基本上，我有一個圖像&當我mouseover，我想覆蓋（這是一個彩色格）出現在頂部。

我在這個fiddle這半工半工。

<img src="http://mirrorchecker.com/images/rod_160.png" width="160" 
class="company-image"/> 
<div class="company-image-overlay"></div> 

/* CSS */ 
.company-image 
{ 
} 
.company-image-overlay 
{ 
width: 160px; 
height: 160px; 
background-color: #ffb00f; 
z-index: 1; 
opacity: 0.5; 
    position: fixed; 
    top: 0.5em; 
    display:none; 
} 

/* JQUERY */ 
$('.company-image').mouseover(function() 
    { 
     $('.company-image-overlay').show(); 
    }); 
$('.company-image').mouseout(function() 
    { 
     $('.company-image-overlay').hide(); 
    });

這個問題似乎重疊出現時是，鼠標不再是技術上在.company-image因此我們得到的在輸入/輸出恆定的騎自行車和閃爍的背景。

任何想法？

來源

2013-03-30 Paul Smith

兩個很好的答案，但我更喜歡大衛·托馬斯一個可讀性和簡單，當我在看代碼6個月的時間來弄明白:) –

選擇一個答案，然後。 – jeremy

最簡單的解決方案是增加的纏繞元件，用於兩個元件：

<div class="wrap"> 
    <img src="http://mirrorchecker.com/images/rod_160.png" width="160" class="company-image" /> 
    <div class="company-image-overlay"></div> 
</div>

和地點mouseover/mouseout方法該元件代替：

$('.wrap').mouseover(function() { 
    $('.company-image-overlay').show(); 
}).mouseout(function() { 
    $('.company-image-overlay').hide(); 
});

JS Fiddle demo。

來源

2013-03-30 20:15:13

我知道它有很多天前，但我遇到了相同的要求。我認爲我們必須設置顯示爲內聯類的內聯塊（移動鼠標指針右側的圖像仍然顯示覆蓋層），除了它的完美答案 – Vivekh

而不是檢查.company-image元素，你將要檢查覆蓋。嘗試以下操作。

$('.company-image').on("mouseover", function() { 
    $('.company-image-overlay').show(); 
}); 

$('.company-image-overlay').on("mouseout", function() { 
    $('.company-image-overlay').hide(); 
});

來源

2013-03-30 20:13:54 jeremy

如果我是你，我只會使用CSS。其實你不需要任何類型的功能，如show()或hide()。我使用了一個標籤來打包，因爲一些舊的Internet Explorer版本只在此標籤上知道:hover。

您可以檢查的伎倆here

來源

2013-03-30 23:50:05 stefanz

啊我看到了斯特凡茲，所以你實際上是讓圖像不透明讓讓背景'閃耀'直到現在。這是我一開始的想法，但訴諸於JQuery。優秀。我會接受這是正確的答案，但自從我詢問了關於JQuery的問題，我將使用JQuery示例，但是最初（在發佈此問題之前）嘗試使用全部CSS選項。 –

+1極好的建議，最少的JavaScript，比其他解決方案更好。 – Matt

JQuery鼠標懸停圖像覆蓋

回答

相關問題