更改链接悬停时的背景图像

Posted 2023-03-06

【中文标题】更改链接悬停时的背景图像

【英文标题】：Change background image on link hover

【发布时间】：2013-09-22 09:57:29

【问题描述】：

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

我正在制作我的作品集，背景是一个女人的照片，位于中间。 在左侧，我有一个导航栏，其中包含指向其他页面的链接。

我基本上想要的是当我将鼠标悬停在其中一个链接上时要更改的背景图像。 无论是通过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")');
);
);

希望对您有所帮助，再次感谢。

【问题讨论】：

请提供相关的 HTML/CSS/JS 来证明您已经尝试过 - 是的 - 来回答您的问题，这是可能的。

***.com/questions/11940645/…

这里是您问题的答案：是的，这是可能的。你试过什么？

【参考方案1】：

这是您问题的通用 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")');
);

【讨论】：

这就是我想要的。非常感谢。似乎我的 jquery 库安装不正确。再次非常感谢您。

【参考方案2】：

是的，这是通过 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")');

);

【参考方案3】：

您不需要 JavaScript 来执行此操作，您可以在纯 CSS 2.1 上使用 :hover 伪类：

#baggrund:hover 
    background-image: url('images/Kat5.jpg');

【参考方案4】：

这是经过测试的完美解决方案：

$(document).ready(function() 

        $('a.class').hover(

           function () 
              $('#portfolio').css('background-image', 'url("other.jpg")');
           , 

           function () 
              $('#portfolio').css('background-image', 'url("woman.jpg")');
           
        );

     );

【参考方案5】：

这是我通过在悬停时更改背景图像位置遇到的解决方案

<!--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;