在悬停和替换上替换图像单击链接

Question

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

以下是那个让我感到高兴的部分......

当我在其下方的某个链接上“悬停”或“点击”时，我想替换主图像。主图像下方的每个链接都有自己的特定图像。然后我想打开/关闭链接图像“切换”。

我试图用纯粹的CSS来做这件事并且真的很难。

感谢您的帮助。

Answer 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/

Answer 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。

Answer 3

您可以使用精灵，:hover和background-position属性在CSS中进行悬停更改，但我认为这不适合此类事情。 jQuery解决方案会更好。

Answer 4

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

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

如果您发布了一些实际代码会有所帮助，这样我们就可以在为您提供解决方案时引用它。我的代码假设您有一个包含每个图像的锚点。

Answer 5

尝试使用本指南。 Image Change on Hover。它实现了mousehover。您只需要更改背景：url而不是后台位置。

此链接适用于您的点击类似完整实施On MouseClick。实际上，您只需要注册要通过css路由的点击事件。