如何在悬停时更改图像？

时间：2017-01-12 11:21:00

标签： jquery html css

当我将鼠标悬停在第一个图像上时它会改变，第二个div图像也会改变，当我悬停第一个div图像时，这个过程会反过来改变并使用jQuery自行更改？

点击此链接 https://www.studioairport.nl/并转到与我们的团队会面内容

.our-team{
    border: 1px solid #d3d3d3;
    position: relative;
    overflow: hidden;
}
.our-team img{
    width: 100%;
    height: auto;
}
.our-team .team-content{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 45px 18px;
    background: rgba(0,0,0,0.7);
    transform: translateX(-100%);
    transition: all 0.20s ease 0s;
}
/*.our-team:hover .team-content{
    transform: translateX(0);
}*/
.our-team .team-content .post-title{
    font-size: 18px;
    color: #fff;
    text-transform: uppercase;
}
.our-team .team-content .post{
    font-size: 14px;
    color: #cb95e1;
    display: block;
    margin-bottom: 20px;
}
.our-team .description{
    font-size: 14px;
    line-height: 25px;
    color: #fff;
    margin-bottom: 20px;
}
.our-team .team_social{
    margin:0;
    padding:0;
    list-style: none;
}
.our-team .team_social li{
    display: inline-block;
    margin-right: 5px;
}
.our-team .team_social li a{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    font-size: 17px;
    color: #f5f5f5;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    transition: border 0.3s ease 0s;
}
.our-team .team_social li a:hover{
    border-color: transparent;
}
.our-team .team-prof{
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: right;
    padding: 20px 16px;
    background: rgba(0,0,0,0.7);
    transform: translateX(0);
    transition: all 0.20s ease 0s;
}
/*.our-team:hover .team-prof{
    transform: translateX(100%);
}*/
.our-team .team-prof .post-title{
    font-size: 18px;
    color: #fff;
    margin: 0 0 8px 0;
    text-transform: uppercase;
}
.our-team .team-prof .post{
    font-size: 14px;
    color: #cb95e1;
    margin-bottom: 0;
}
@media only screen and (max-width: 990px) {
    .our-team{ margin-bottom: 20px; }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

 <div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-6">
            <div class="our-team">
                <img class="xyz"  src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg" alt="">
                <div class="team-content">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
                    </p>
                    <ul class="team_social">
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                    </ul>
                </div>
                <div class="team-prof">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                </div>
            </div>
        </div>
		<div class="col-md-3 col-sm-6 col-xs-6">
            <div class="our-team">
                <img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
                <div class="team-content">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
                    </p>
                    <ul class="team_social">
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                    </ul>
                </div>
                <div class="team-prof">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                </div>
            </div>
        </div>
		<div class="col-xs-6 col-md-3 col-sm-6">
            <div class="our-team">
                <img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
                <div class="team-content">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post ">Web Desginer</span>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
                    </p>
                    <ul class="team_social">
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                    </ul>
                </div>
                <div class="team-prof">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                </div>
            </div>
        </div>
		<div class="col-md-3 col-sm-6 col-xs-6">
            <div class="our-team">
                <img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="">
                <div class="team-content">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                    <p class="description">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
                    </p>
                    <ul class="team_social">
                        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                    </ul>
                </div>
                <div class="team-prof">
                    <h3 class="post-title">Williamson</h3>
                    <span class="post">Web Desginer</span>
                </div>
            </div>
        </div>
    </div>
</div>

6 个答案:

答案 0 :(得分：3)

你可以使用简单的内联javascript 

<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="" onmouseover="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg'"  onmouseout="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg'">

或使用jquery 

<img src="http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg" alt="" data-hover-src="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-2.jpg'"  data-normal-src="this.src='http://jqueryrain.com/tutorial/our-team/demo30/images/img-1.jpg'">

$("img")
  .on( "mouseenter", function() {
     $(this).attr("src", $(this).data('hover-src'));
 })
 .on( "mouseleave", function() {
     $(this).attr("src", $(this).data('normal-src'));
});

答案 1 :(得分：1)

您可以在每个<img />代码中声明属性，例如data-replacement：

<img class="xyz" data-replacement="/image/my_replacement_image.jpg" src="..." alt="" />

然后你可以使用jQuery hover方法：

$(".our-team img").hover(function() {
    var img = $(this);
    // store current src in image data
    img.data('src', img.attr("src"));
    // replace
    img.attr("src", img.data('replacement'));
},
function(){
    // restore src
    $(this).attr('src', img.data('src'));
});

答案 2 :(得分：0)

使用css而不是html设置背景图片 试试这个

HTML：

<div class="our-team">
   <div class="img-block"></div>

CSS：

.img-block{ 
 background: url("img-1.jpg") no repeat;
 background-position:2px 2px;
 }

悬停时更改图片： 

.img-block:hover{ 
      background:url("img-2.jpg") no repeat;
 }

您可以根据需要设置背景位置和所需的图像路径

答案 3 :(得分：0)

也可以尝试

在img标签中输入ID 

#idname:hover{ background:url("img2.png"); }

答案 4 :(得分：0)

如果您在后台使用这些图片，而不是使用img标签。在css中很容易处理它。

这是一个HTML模型：

:my-headers

这是CSS：

<div style="background-image: url(image-1.jpg)"></div>

答案 5 :(得分：0)

提示'JavaScript / jQuery Less'解决方案。建议你不要使用jQuery / Javascript来完成这个简单的任务。

    <div class='image-container'>
    <img class="xyz" src="http://pnge.org/wp-content/uploads/2016/12/images.jpg" alt="" height='100' width='200' />
    <img class="xyz-replacement" src="http://chainimage.com/images/3d-wallpapers-amazing-wallpapers-tigers-wallpapers-white-tiger.jpg" alt="" height='100' width='200' />
    </div>

<style>
      .image-container{
    	position: relative;
    }
    .image-container:hover .xyz-replacement {
    	display: block;
    }
    .xyz-replacement{
    	display: none;
    	position: absolute;
      bottom: 0;
    	z-index: 9;
    }
  
  </style>

相关问题
最新问题