悬停javascript上的图像叠加答案

【问题标题】：image overlay on hover javascript悬停javascript上的图像叠加
【发布时间】：2013-11-13 10:02:45
【问题描述】：

我正在尝试使用两个叠加图像在图像上显示附加信息。鼠标悬停时，overlay1 将显示在主图像的左上角，overlay2 将显示在右下角..

当我尝试在单个图像上执行此操作时，它工作正常.. 但是当我继续在图像库上进行操作时，覆盖图像会显示在屏幕的左上角和右下角。

我希望将图像叠加在各自的主图像上..

这里是html-

<div id="WhizIt">
<div id="btpanelexsmall">
<h3>Heading1</h3>

<ul >
<li><a href=""><img src="image/" class="wit"/><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>
</ul><br>

<ul>
<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>

<li><a href=""><img src="images/arrow1.jpg" class="wit" /><img class="overlay"  
src="image/top-left.jpg"/>
<img class="overly" src="image/bottom-right.jpg"/></a></li>
</ul>
</div>
</div>

脚本是-

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('ul li').mouseenter(function() {
                $(this).find(".overlay").show();
                $(this).find(".overly").show();
            });
            $('ul li').mouseleave(function() {
                $(this).find(".overlay").hide();
                $(this).find(".overly").hide();
            });
        });
</script>

和css-

.WhizIt li{position:relative;
float:left;
padding-left:5px;
list-style:none;}


.overlay 
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;}



.overly 
{
 position:absolute;
 height:50px;
 width:150px;
 bottom:0;
 right:0; 
display:none;}

 #btpanelexsmall{height:390px;
 margin:0px;
 padding:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
border:2px solid yellow;
background: #f0f0f0;}

我的页面上有很多画廊！提前致谢

【问题讨论】：

我想你以前也有同样的问题！ - stackoverflow.com/questions/19830285/…
@SujataChanda 是的，记得你帮我找到解决方案.. 但是当我现在使用上面的 html 使用脚本时，它不能正常工作
您现在面临什么问题？
@SujataChanda 当我将鼠标悬停在主图像上时，覆盖的图像显示在整个屏幕的角落而不是主图像的角落
好的。让我看看这个问题。如果我能找到任何解决方案，那么我会在这里发布。

标签： javascript jquery html css image

【解决方案1】：

我认为你的第一个问题已经解决了。现在为叠加图像提供“旋转”效果，使用 css3 动画。我们也可以使用 jquery 来完成，但我认为使用 css3 会很好。

为了这个效果，使用这个脚本：-

 $(document).ready(function() {
                $('ul li').mouseenter(function() {
                    $(this).find(".overlay").show().addClass('rotate');
                    $(this).find(".overly").show().addClass('rotate');
                });
                $('ul li').mouseleave(function() {
                    $(this).find(".overlay").hide().removeClass('rotate');
                    $(this).find(".overly").hide().removeClass('rotate');
                });
            });

添加这个 css:-

.rotate {
    -webkit-animation: rotateImg 1s linear;
    -moz-animation: rotateImg 1s linear;
    -ms-animation: rotateImg 1s linear;
    -o-animation: rotateImg 1s linear;
    animation: rotateImg 1s linear;
}

@keyframes "rotateImg" {
    50% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-moz-keyframes "rotateImg" {
    50% {
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -moz-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-webkit-keyframes "rotateImg" {
    50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-ms-keyframes "rotateImg" {
    50% {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

@-o-keyframes "rotateImg" {
    50% {
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
100% {
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

}

【讨论】：

【解决方案2】：

试试这个代码：

<div id="WhizIt">
<div id="btpanelexsmall">
<h3>Heading1</h3>

<ul >
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>
<li><a href=""><img class="overly_left" src="image/top-left.jpg"/></a></li>

</ul><br>

<ul>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>
<li><a href=""><img class="overly" src="image/bottom-right.jpg"/></a></li>

</ul>
</div>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('ul li').mouseenter(function() {
                $(this).find(".overlay").show();
                $(this).find(".overly_left").show();
                $(this).find(".overly").show();
            });
            $('ul li').mouseleave(function() {
                $(this).find(".overlay").hide();
                $(this).find(".overly_left").hide();
                $(this).find(".overly").hide();
            });

        });
</script>
<style>
.WhizIt li{position:relative;
float:left;
padding-left:5px;
list-style:none;}


.overlay 
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;}

.overly_left 
{
 position:absolute;
 height:50px;
 width:50px;
 top:0;
 left:0; 
display:none;}


.overly 
{
 position:absolute;
 height:50px;
 width:50px;
 bottom:0;
 right:0; 
display:none;}

 #btpanelexsmall{height:390px;
 margin:0px;
 padding:0px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
border:2px solid yellow;
background: #f0f0f0;}
</style>

【讨论】：