更改链接悬停时的背景图片 [英] Change background image on link hover

问题描述

所以我有这个问题，即使我进行了彻底的网络搜索也找不到.

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.

我基本上想要的是当我将鼠标悬停在链接之一上时要更改的背景图像. 无论是通过CSS，Javascript还是JQuery，我都想知道是否有可能.

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.

先谢谢您.

抱歉，我将尽我所能.

Sorry, I'll try to provide the best I can.

<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"是我要更改为其他图像的图像.

This is the basic html. The id="baggrund" is the image I want to change to something else.

#baggrund {
background-image: url(images/laerkeryg.jpg);
background-repeat: no-repeat;
width: 720px;
height: 394px;
position: absolute;
left: 805px;
top: 10%;}

这是我要替换的图像的CSS.

This is the CSS for the image I want to have replaced.

$( document ).ready(function() {
    $("#first").hover(function () {
    $("baggrund").css("background-image", 'url("images/Kat5.jpg")');
});
});

希望这会有所帮助，再次感谢.

Hope this helps, and thanks again.

推荐答案

以下是您问题的通用jquery答案:

Here's a generic jquery answer to your question:

$('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")');
});

这篇关于更改链接悬停时的背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！