javascript 更改链接悬停时的背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18858714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background image on link hover
提问by Jacob
So I have this problem, which I couldn't find, even though I did a thorough websearch.
所以我遇到了这个问题，即使我进行了彻底的网络搜索，我也找不到。
I am making my portfolio, and the background is a picture of a woman, located in the center. On the left I have a nav bar with link to other pages.
我正在制作我的作品集，背景是一个女人的照片，位于中心。在左侧，我有一个导航栏，其中包含指向其他页面的链接。
What I basicly want, is the background image to change when I hover over one of the links. Whether it's through CSS, Javascript or JQuery, I want to know if it's possible.
我基本上想要的是当我将鼠标悬停在其中一个链接上时要更改的背景图像。无论是通过 CSS、Javascript 还是 JQuery，我都想知道是否有可能。
Thank you in advance.
先感谢您。
Edit: Sorry, I'll try to provide the best I can.
编辑：对不起，我会尽力提供最好的。
HTML
HTML
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<div class="header">/jacob gerlif pilegaard/</div>
<div class="underheader">portfolio</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html"">Gallery</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<h1>About me...</h1>
<p> bla bla bla bla bla</p>
<div id="circles"></div>
This is the basic html. The id="baggrund" is the image I want to change to something else.
这是基本的html。id="baggrund" 是我想更改为其他内容的图像。
CSS
CSS
#baggrund {
background-image: url(images/laerkeryg.jpg);
background-repeat: no-repeat;
width: 720px;
height: 394px;
position: absolute;
left: 805px;
top: 10%;}
This is the CSS for the image I want to have replaced.
这是我想要替换的图像的 CSS。
Jquery
查询
$( document ).ready(function() {
$("#first").hover(function () {
$("baggrund").css("background-image", 'url("images/Kat5.jpg")');
});
});
Hope this helps, and thanks again.
希望这会有所帮助，再次感谢。
回答by Eric H.
Here's a generic jquery answer to your question:
这是对您的问题的通用 jquery 答案：
$('a.class').on('mousein', function(){
$('#portfolio').css('background-image', 'url("other.jpg")');
});
$('a.class').on('mouseout', function(){, function(){
$('#portfolio').css('background-image', 'url("woman.jpg")');
});
回答by Daniel Schwarz
Yes, here's a rough example via JSFiddle http://jsfiddle.net/dGnMX/
是的，这是通过 JSFiddle http://jsfiddle.net/dGnMX/的一个粗略的例子
<nav>
<a id="first">Link 1</a>
<a id="second">Link 1</a>
<a id="third">Link 1</a>
</nav>
$("#first").click(function () {
$("body").css("background-image", 'url("http://static.bbc.co.uk/solarsystem/img/ic/640/collections/space_exploration/space_exploration_large.jpg")');
});
$("#second").click(function () {
$("body").css("background-image", 'url("http://i.telegraph.co.uk/multimedia/archive/02179/Milky-Way_2179177b.jpg")');
});
$("#third").click(function () {
$("body").css("background-image", 'url("http://www.thatsreallypossible.com/wp-content/uploads/2012/12/Space-Colonialisation.jpg")');
});
回答by falsarella
You don't need JavaScript to do that, you can use :hoverpseudo-class on pure CSS 2.1:
你不需要 JavaScript 来做到这一点，你可以:hover在纯 CSS 2.1 上使用伪类：
#baggrund:hover {
background-image: url('images/Kat5.jpg');
}
回答by Atif Tariq
Here's perfect tested solution:
这是经过测试的完美解决方案：
$(document).ready(function() {
$('a.class').hover(
function () {
$('#portfolio').css('background-image', 'url("other.jpg")');
},
function () {
$('#portfolio').css('background-image', 'url("woman.jpg")');
}
);
});
