我试图设置一个页面，看起来像下面的图像。悬停并点击链接替换图片

下面是部分; S挂了我...

我想有主图像时替换I“悬停”或它下面的一个链接“点击”。主图像下面的每个链接都会有它自己的特定图像。然后，我想让链接图像“打开”/关闭。

我试图用纯CSS做这个，而且真的很难。

enter image description here

感谢您的帮助。

来源

2012-02-01 C Dog

我在上面...... – 2012-02-01 17:33:08

你不能用CSS做到这一点。你需要使用JavaScript。给它一个镜头，然后回来，在这里发布你在JS遇到麻烦的地方。 – maxedison 2012-02-01 17:37:57

@maxedison它肯定可以用CSS来完成。看到我的答案。 – 2012-02-01 18:20:56

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/

来源

2012-02-01 17:39:24

-1

尝试使用本指南。 Image Change on Hover。它实现了mousehover。您只需要更改背景：网址而不是背景位置即可完成。

这个链接是为您的点击有点像一个完整的实施On MouseClick。你实际上只需要注册一个你想通过CSS路线的点击事件。

来源

2012-02-01 17:41:41

你的主图像下面的链接，应包含在一些识别容器大家可以参考一下，像这样：

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

来源

2012-02-01 17:44:08 Kato

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

来源

2012-02-01 17:45:09 ryanve

我不知道如何做到这一点只是CSS，但这里是一个快速的小jQuery，应该让你接近。

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

，如果你发布了一些实际的代码，这将帮助，这样，给你的解决方案时，我们可以参考它。我的代码假设你有一个保存每个图像的锚点。

来源

2012-02-01 17:46:48

悬停并点击链接替换图片

回答

JavaScript解决方案

替代解决方案（纯CSS）

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

相关问题