如何在導航懸停時在單獨的div中更改圖像？

我有一個網站，我正在努力，在頁面頂部的div中有一個導航欄，後面跟着一個單獨的div，其中包含直接位於其下方的圖像。如何在導航懸停時在單獨的div中更改圖像？

我試圖找出通過懸停在導航欄的每個部分上來更改圖像的最佳方法。

基本上我想要一個家庭的圖像，當家庭導航功能被徘徊時出現，等等與菜單的其餘部分。

UPDATE：

正如我試過（因爲我沒有那樣清晰）之前解釋我要讓每一個導航欄元素（首頁，下載等），在它下面的DIV顯示出不同的圖像。以下是這兩個元素的代碼部分。

  <li class="active"><a href="/">Home</a></li> 
<li ><a href="/about">About</a></li> 
<li ><a href="/mods">Mods</a></li> 
<li><a href="/forums">Forums</a></li> 
<li ><a href="/downloads">Downloads</a></li> 
<li><a href="//blog.blog.com">Blog</a></li> 
     </ul> 
    </div> 
</nav> 

<div class="parallax-container"> 
    <div class="container" style="background: rgb(55,71,79); width:960px; padding-top: 10px; padding-left: 50px; border: 2px; border-radius: 50px;"> 
     <div class="row"> 
      <div class="hover-image white-text col s12 l6"> 
       <img src="homeimage.png" class="hover image" style="height:auto; width:auto; max-width: 860px; max-height: 860px;"/> 
     <h5 class="hover-header" style="padding-left: 20px;">Home</h2> 
       <p class="hover-paragraph" style="padding-left: 25px;">Welcome to the page!</p> 
      </div> 
     </div> 
    </div> 
<div class="parallax"><img src="/img/image.png"></div> 

</div> 

<style> 
.hover-image { 
    position: relative; 
    width: 100%; 
    margin: auto; 
} 

.hover-header { 
    position: absolute; 
    top: 350px; 
    left: 10; 
    width: 100%; 
} 
.hover-paragraph { 
    position: absolute; 
    top: 380px; 
    width: 100%; 
} 
</style>

Page Layout

來源

2016-09-29 Sookendestroy

請寫代碼向我們展示你想show.I看你是新來的StackOverflow所以我不給你否定的評價是什麼，但人家給你的底片。如果你問這個問題的風格它可以防止你問更多的問題。請用你的代碼更新你的問題。 – SAM

請提供[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。 – TylerY86

試試這個代碼 -

CSS -

#navImage img{ 
     display:block; 
     width:500px; 
     height:auto; 
    } 
    #myNav{ 
     list-style-type: none; 
    } 
#myNav li { 
    display: inline; 
    padding: 10px; 
} 
#myNav li a:hover { 
    color:#00ffff; 
} 

#navImage img{ 
    display:none; 
}

HTML

<ul id="myNav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
    </ul> 

    <div id="navImage"> 
     <img src="img_chania.jpg" alt="Chania"> 
     <img src="img_chania2.jpg" alt="Chania"> 
     <img src="img_flower.jpg" alt="Flower"> 
     <img src="img_flower2.jpg" alt="Flower"> 
    </div>

JS初始化（使用jQuery） -

$("#myNav li a").on('mouseover', function(){ 
     $("#navImage img").hide().eq($(this).closest('li').index()).show(); 
    });

請注意，如果您正在使用自適應設計（使用引導程序導航），則需要相應地進行更改。

的jsfiddle - https://jsfiddle.net/guruling/k2zgot5r/

來源

2016-09-29 05:55:51

這正是我所尋找的，非常感謝你！現在我只需要對每張圖片旁邊的段落做同樣的事情。 – Sookendestroy

嘗試CSS這樣的事;

.nav:hover .image{ 
    background-image: url('path/to/image.ext'); 
}

如果您可以分享您的代碼，我可以更具體。

來源

2016-09-29 03:44:52

他可能想要一個像'.nav：hover + .image'這樣的規則，沒有[MVCE]（http://stackoverflow.com/help/mcve）就很難說。 – TylerY86

如果圖像與導航所在的圖像位於不同的div中，則此方法不太可行，這是OP要求的。 – 2016-09-29 04:00:32

@Pim感謝編輯 –

.myButtonLink { 
    display: block; 
    width: 100px; 
    height: 100px; 
    background: url('/path/to/myImage.png') bottom; 
    text-indent: -99999px; 
} 
.myButtonLink:hover { 
    background-position: 0 0; 
}

<a class="myButtonLink" href="#LinkURL">Leaf</a>

你希望是這樣的。請檢查此鏈接： - http://kyleschaeffer.com/development/pure-css-image-hover/

來源

2016-09-29 03:56:16

不，實際上是在尋找一種方法來改變一個完全獨立的圖像，當按鈕被徘徊，而不是按鈕本身，謝謝。 – Sookendestroy

如何在導航懸停時在單獨的div中更改圖像？

回答

相關問題