我試圖設置一個頁面，看起來像下面的圖像。懸停並點擊鏈接替換圖片

下面是部分; 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，懸停）

相關問題