如何在div中顯示圖像，onhover某些元素？

我想重新創建在這裏https://jumpshare.com/在'捕獲和快速分享任何東西'的效果，當你將鼠標懸停在左邊的文本上，在右邊的blcok中出現其他圖像。如果elemnet在同一個區塊中，我知道要做到這一點，但如果他們在單獨的div中，我該怎麼做？如何在div中顯示圖像，onhover某些元素？

我嘗試這樣做：

<div href="#" class='text'> 
    Hover me 
</div> 
<div class='image'> 
    Show me 
</div> 

image{ 
    display: none; 
} 
.text:hover .image{ 
    display: block; 
}

來源

2017-09-02 rick1

你需要JavaScript。你到目前爲止嘗試過什麼嗎？ – Dekel

到目前爲止你有什麼嘗試過嗎？ **請閱讀[預計堆棧溢出用戶需要多少研究工作]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users ）**。在發佈之前，*您應該研究過您的問題，並嘗試親自編寫代碼*。如果你遇到* *特定*的東西，請返回並在[最小，完整和可驗證示例]（https://stackoverflow.com/help/mcve）中包含你已經嘗試過的內容以及相關代碼的摘要我們可以提供幫助。 – FluffyKitten

爲什麼arte你只是把缺點，並沒有試圖幫助？如果我在stackoverflow上寫下問題，這意味着我嘗試了所有可能的變體 – rick1

您列出的網站使用，當用戶將鼠標懸停被添加到每格一個單獨的CSS類。他們選擇了他們的班級。「請參閱下面關於如何使用jquery添加和刪除類來實現此效果。

CSS

首先，創建你想應用到你的DIV的花式當有人懸停在：

.selected { 
    background-color: lightblue; 
    color: blue; 
    font-weight: 700; 
}

jQuery的

然後，做一個jquery用於懸停在懸停時應用「selected」類的每個div上的函數，並在懸停到antoher div時將其移除。

$('.hoverdivs div').on('hover', function() { 
    var selected = $('.hoverdivs div.selected'); 
    selected.removeClass('selected'); 
    $(this).addClass('selected'); 
});

HTML

這裏是HTML是什麼樣子我假設的代碼：

<div class="hoverdivs"> 
    <div class="hoverdiv1"> 
    </div> 
    <div class="hoverdiv2"> 
    </div> 
    <div class="hoverdiv3"> 
    </div> 
    <div class="hoverdiv4"> 
    </div> 
</div>

確保您最初的格式應用到的div並與內容填充它們！希望這可以幫助。

來源

2017-09-02 23:33:50

解一號它使用CSS：

.text:hover + .image { 
    display: block; 
}

+意味着我打電話鄰居選擇器，其選擇下一個向受試者元素的元素。 Note: this only works if the elements sits beside each other.

解決方案2是使用JavaScript | jQuery：

// when pointer hovers the element 
document.querySelector(".text").addEventListener("mouseenter", function() { 
    document.querySelector(".image").style.display = "block"; 
}); 

// when pointer leaves the element 
document.querySelector(".text").addEventListener("mouseleave", function() { 
    document.querySelector(".image").style.display = "none"; 
}); 

// jQuery: onenter 
$(".text").on("mouseenter", function() { 
    $(".image").css("display", "block"); 
}); 

// jQuery: onleave 
$(".text").on("mouseenter", function() { 
    $(".image").css("display", "none"); 
});

，因爲你想在你的榜樣網站複製功能，您應該添加多個事件偵聽器顯示不同的圖像。

希望有幫助。

來源

2017-09-02 23:39:16 masterpreenz

回答

相關問題