navのホバー上で別のdivを変更するには？

Question

私は、ページの上部にあるdivにナビゲーションバーがあるところで作業しているサイトを持っています。別のdivには、そのすぐ下の画像が含まれています。

私は、ナビゲーションバーの各部分をホバリングすることによって画像を変更する最も良い方法を見つけようとしています。

基本的には、ホームナビ機能がホバーされたときにホームの画像が表示されるようにし、残りのメニューでも同様に表示します。私は（私が持っている可能性がほど明確ではありません）私はそれ以下のdivに異なる画像を表示し、各ナビゲーションバー要素（ホーム、ダウンロードなど）を作りたいの前に説明しようとしたとして

：

UPDATE 。ここに2つの要素のコードセクションがあります。

  <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

Answer 1

は、このコードを試してみてください -

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（jQueryを使って）初期化する

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

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

レスポンシブデザイン（ブートストラップナビゲーションを使用）で作業している場合は、それに応じて変更を行う必要があります。

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

Answer 2

このようなCSS何かを試してみてください。

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

コードを共有することができれば、より具体的にすることができます。

Answer 3

.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/