5

どうすればこれを100％正しく機能させることができるのだろうと思っています。私はほとんどそこにいると思います。

基本的に、私は画像を持っています & マウスオーバーすると、オーバーレイ (色付きの div) が上に表示されます。

私はこのフィドルでこの半作業をしています。

<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ため、オーバー/アウトと点滅する背景が常に繰り返されます。

何か案は？

4

3 に答える 3

3

私があなたなら、css だけを使用します。show()実際には、やのような関数は必要ありませんhide()。:hover一部の古いバージョンの Internet Explorer はこのタグのみを認識しているため、タグを使用してラッピングを行いました。

ここでトリックを確認できます

于 2013-03-30T23:50:05.083 に答える
3

要素をチェックする代わりに.company-image、オーバーレイをチェックする必要があります。以下を試してください。

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

$('.company-image-overlay').on("mouseout", function () {
    $('.company-image-overlay').hide();
});
于 2013-03-30T20:13:54.220 に答える