在链接悬停时更改背景图像
Change background image on link hover
所以我有这个问题,即使我做了彻底的网络搜索,我也找不到。
我正在制作我的作品集,背景是一个女人的照片,位于中心。在左侧,我有一个导航栏,其中包含指向其他页面的链接。
我基本上想要的是当我将鼠标悬停在其中一个链接上时要更改的背景图像。无论是通过CSS,Javascript还是JQuery,我都想知道这是否可能。
提前谢谢你。
编辑:对不起,我会尽力提供最好的。
.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>
这是基本的 html。id="baggrund"是我想更改为其他图像的图像。
.CSS
#baggrund {
background-image: url(images/laerkeryg.jpg);
background-repeat: no-repeat;
width: 720px;
height: 394px;
position: absolute;
left: 805px;
top: 10%;}
这是我想要替换的图像的 CSS。
Jquery
$( document ).ready(function() {
$("#first").hover(function () {
$("baggrund").css("background-image", 'url("images/Kat5.jpg")');
});
});
希望这有帮助,再次感谢。
这是对你问题的通用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")');
});
是的,这是一个通过 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")');
});
你不需要
JavaScript 来做到这一点,你可以在纯 CSS 2.1 上使用:hover
伪类:
#baggrund:hover {
background-image: url('images/Kat5.jpg');
}
这是经过测试的完美解决方案:
$(document).ready(function() {
$('a.class').hover(
function () {
$('#portfolio').css('background-image', 'url("other.jpg")');
},
function () {
$('#portfolio').css('background-image', 'url("woman.jpg")');
}
);
});
这是我通过在
悬停时更改背景图像位置遇到的解决方案
<!--HTML-->
<div class="twitter1">
<a href="https://twitter.com">
</a>
</div>
/*CSS*/
.twitter1 a{
display: block;
background: url(12.' Sprites.png) 0px 0px;
background-repeat: no-repeat;
width: 50px;
height: 47px;
}
.twitter1 a:hover{
background: url(12.' Sprites.png) 0px 52px;
}
相关文章:
- 可以在这里为背景图像设置滤镜吗
- 使用 js 将背景图像设置为 HTML
- 如何使用css动画/javascript使具有背景图像的元素出现
- 循环浏览多个身体背景图像
- 背景图像顶部的滚动图像不移动
- 在pdfmake中嵌入背景图像
- 修复选择菜单时的背景图像
- 使用css()设置背景图像;不起作用
- 鼠标悬停时如何居中放大背景图像
- 强制谷歌为javascript背景图像编制索引
- 淡入不带HTML的背景图像
- 具有淡入淡出效果的全背景图像
- 未加载随机背景图像
- 背景图像前显示Javascript警报
- javascript背景图像位置循环
- CSS动画背景图像的过渡越来越暗
- "Ken Burns效应”;悬停背景图像
- 通过ID JavaScript显示随机背景图像
- JavaScript背景图像
- 带有图像和背景图像的ClipTo