Question

我有一堆图像排成一行，我想在悬停时显示不同的图像并添加一个框。我在堆栈上发现了一个帮我完成第一部分的帖子，但我不确定如何实现显示框的部分。我想我将不得不在悬停时将不透明度从0变为100，然后再悬停在悬空状态，但我又不知道如何实现它。有什么想法吗？

到目前为止我的代码：

HTML

<article class="homeFeatured">
    <section>
        <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>">
            <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" />
            <span>View Item</span>
        </a>    
    </section>
    <section>
        <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>">
            <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" />
            <span>View Item</span>
        </a>    
    </section>
    <section>
        <a href="<?php echo site_url($perm->category . '/' . $perm->perm_name) ?>">
            <img src="<?php echo base_url('public/img/products/' . $perm->perm_name ?>" alt="" />
            <span>View Item</span>
        </a>    
    </section>
</article>

CSS：

.homeFeatured section{
    position: relative;
    float: left;
    display: block;
    height: 303px;
    width: 230px;
    margin-left: 10px;
}

.homeFeatured span {
    position: absolute;
    top: 50%;
    left: 50px;
    width: 100px;
    background: #8cc63f;
    border: 1px solid #638d2b;
    line-height: 30px;
    text-align: center;
    display: none;
}

Jquery的：

$(".homeFeatured img")
           .mouseover(function() { 
               var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg";
               $(this).attr("src", src); 
           })
           .mouseout(function() {
               var src = $(this).attr("src").replace("Hover", "");
               $(this).attr("src", src);
});

Answer 1

更新

假设您想在悬停时显示<span>，则有两个选项：

根据您需要涵盖的浏览器，使用jQuery作为动画可能有点过分。

如果你能使用IE＆lt; 10实际上并没有动画过渡，CSS解决方案会做。

纯CSS：

.homeFeatured span {
    /* ... the stuff you have already */
    display: block;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
}

.homeFeatured section a:hover span {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -ms-transition: 0.5s;
}

请注意，IE专有的filter属性会使您的CSS失效。

jQuery的：

 $(".homeFeatured img")
       .mouseover(function() { 
           var src = $(this).attr("src").match(/[^\.]+/) + "Hover.jpg";
           $(this).attr("src", src);
           $('+ span', this).animate({opacity : 1});
       })
       .mouseout(function() {
           var src = $(this).attr("src").replace("Hover", "");
           $(this).attr("src", src);
           $('+ span', this).animate({opacity : 0});
});

Jquery Hover更改图像和显示框

1 个答案: