【问题标题】：Replace Image on Hover & Click of a Link在悬停和单击链接时替换图像
【发布时间】：2012-02-01 17:31:44
【问题描述】：

我正在尝试设置一个如下图所示的页面。

这是让我挂断电话的部分......

当我“悬停”或“单击”其下方的链接之一时，我希望替换主图像。主图像下方的每个链接都有自己的特定图像。然后我想让链接图像“切换”开/关。

我尝试过用纯 CSS 来做这件事，但真的很难。

感谢您的帮助。

【问题讨论】：

你不能用 CSS 做到这一点。您需要使用 JavaScript。试一试，然后回来并在此处发布您遇到 JS 问题的地方。
@maxedison 确实可以用 CSS 完成。看我的回答。
确实可以。非常聪明。不过我还是会坚持使用 JS —— 远没有那么复杂，而且更符合逻辑的 HTML 标记。

标签： javascript jquery hover toggle

【解决方案1】：

JavaScript 解决方案

HTML：

<div id="output"></div>
<ul id="nav">
    <li data-href="http://placekitten.com/120/100">Cat 1</li>
    <li data-href="http://placekitten.com/110/100">Cat 2</li>
    <li data-href="http://placekitten.com/130/100">Cat 3</li>
    <li data-href="http://placekitten.com/150/100">Cat 4</li>
</ul>

JavaScript：

$( nav ).on( 'click', 'li', function () {
    $( this ).addClass( 'selected' ).siblings().removeClass( 'selected' );
    var url = $( this ).data( 'href' );
    $( output ).html( '<img src="' + url + '">' );
});

现场演示： http://jsfiddle.net/Kne3d/

替代解决方案（纯 CSS）

HTML：

<div id="output">
    <img id="image1" src="http://placekitten.com/120/100">
    <img id="image2" src="http://placekitten.com/130/100">
    <img id="image3" src="http://placekitten.com/110/100">
    <img id="image4" src="http://placekitten.com/140/100">
</div>

<ul id="nav">
    <li><a href="#image1">Cat 1</a></li>
    <li><a href="#image2">Cat 2</a></li>
    <li><a href="#image3">Cat 3</a></li>
    <li><a href="#image4">Cat 4</a></li>
</ul>

CSS：

#output img {
    display: none;
}

#output img:target {
    display: inline;
}

现场演示： http://jsfiddle.net/Kne3d/3/

第三种解决方案（纯 CSS，悬停）

HTML：

<ul id="gallery">
    <li>
        <span>Cat 1</span>
        <img src="http://placekitten.com/120/100">
    </li>
    <li>
        <span>Cat 2</span>
        <img src="http://placekitten.com/150/100">
    </li>
    <li>
        <span>Cat 3</span>
        <img src="http://placekitten.com/110/100">
    </li>
    <li>
        <span>Cat 4</span>
        <img src="http://placekitten.com/140/100">
    </li>
</ul>

CSS：

#gallery img {
    display: none;
}

#gallery span:hover ~ img {
    display: block;
}

现场演示：http://jsfiddle.net/Kne3d/5/

【讨论】：

【解决方案2】：

主图片下方的链接应包含在我们可以引用的可识别容器中，如下所示：

<img id="mainImage"></img>

<ul id="mainImageLinks">
   <li><a href="image1.jpg" />Link 1</a></li>
   <li><a href="image2.jpg" />Link 1</a></li>
   <li><a href="image3.jpg" />Link 1</a></li>
   <li><a href="image4.jpg" />Link 1</a></li>
   <li><a href="image5.jpg" />Link 1</a></li>
</ul>

然后你会使用 CSS 来设置元素的样式，显然，这超出了你的问题的范围，但会是这样的：

#mainImage {
   width: 200px;
   height: 200px;
   border: 1px solid black;
   display: block;
   margin: 10px; 
}

#mainImageLinks a {
   display: block;
   float: left;
   padding: 3px; 
}

然后 jQuery 负责其余的工作：

$('#mainImageLinks li a').bind('mouseenter', function() {
   var url = $(this).attr('href');
   $('#mainImage').attr('src', url);
   return false; // prevent the default action on click
});

还有here is a working example。

【讨论】：

【解决方案3】：

您可以使用 sprite、:hover 和 background-position 属性在 CSS 中进行悬停更改，但我认为这对于这类事情来说并不理想。 jQuery 解决方案会更好。

【讨论】：

【解决方案4】：

我不知道如何仅使用 css 来做到这一点，但这里有一个快速的小 jquery，应该可以让你接近。

$("a").each(function(index) {
    $(this).click(function() {
        $("#mainImg").find("img").attr('src', $(this).find("img").attr('src'));
    });
});

如果您发布一些实际代码会有所帮助，这样我们在为您提供解决方案时可以参考它。我的代码假设您有一个锚点来保存每个图像。

【讨论】：

【解决方案5】：

尝试使用本指南。 Image Change on Hover。它具有鼠标悬停的实现。您只需要更改 background: url 而不是 background-position 正在完成。

此链接供您点击，类似于完整的实现On MouseClick。你其实只需要注册一个你想通过css路由的点击事件。

【讨论】：