悬停时替换图像并单击链接

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/