我有一些
javascript设置,以便当我悬停图像时,它会更改为不同的图像.唯一的问题是,它是即时的.如何为此添加过渡以使其平滑,在图像之间淡入淡出?
<div class="social">
<ul class="sociallinks">
<li>
<a href="https://www.linkedin.com/in/lee-jordan">
<img class="linkedinIcon" src="assets/images/linkedin.png" />
</a>
</li>
<li>
<a href="https://github.com/loxol">
<img class="githubIcon" src="assets/images/github.png" />
</a>
</li>
</ul>
</div>
$(document).ready(function() {
$(".linkedinIcon").hover(function() {
$(this).attr("src", "assets/images/linkedinhover.png");
}, function() {
$(this).attr("src", "assets/images/linkedin.png");
});
});
最佳答案 您可以通过不同的方式执行此操作,但在替换src时无法淡化相同的图像.您可以使用两个img标签,甚至将悬停图像作为img标签的背景放置,并使用css过渡在悬停时淡出图像.这是一个例子:
$(function() {
$(".linkedinIcon").hover(function() {
$(this).css("opacity", 0);
}, function() {
$(this).css("opacity", 1);
});
});
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>
甚至可能没有JS,只有css:
ul.sociallinks {
list-style: none;
}
ul.sociallinks a {
width: 300px;
height: 200px;
display: block;
}
ul.sociallinks img {
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
ul.sociallinks img:hover {
opacity: 0;
}
<div class="social">
<ul class="sociallinks">
<li>
<a href="#" style="background-image: url('http://dummyimage.com/300x200/2e97c7/2e97c7&text=2');">
<img class="linkedinIcon" src="http://dummyimage.com/300x200/c72cc7/c72cc7&text=1" />
</a>
</li>
</ul>
</div>