別のdiv内のリンクリストにカーソルを置いたときにdiv画像を変更します。

Question

ブラウザウィンドウの上部と下部にアンカーされたヘッダーとフッターを含む簡単なページを作成しようとしています。内側のコンテンツについては、左側のリンクリスト（独自のdiv内）と右側の別のdivを画像とともに使用しているフレックスボックスラッパーを使用しています。

私はそれほど多くの作業を行っていますが、今は左側のどのリンクを最後に押したかによって、右側のdivの画像を変更したいと思います。 http://department.nyc/と似ています（左下の「クライアント」をクリックし、リンクのリストにマウスを移動）。 javascript/jqueryのようなものは答えですが、無数の検索の後で、私はまだ私が望むものを達成することができませんでした。

これはかなり私がつなぎ合わせてページ持っているかされています

HTML

<div class="wrapper"> 
<header class="header">Header</header> 
<div class="workWrapper"> 
    <div class="workText"> 
    <ul class="workList"> 
    <li id="ex1"><a href="#">Example 1</a></li> 
    <li id="ex2"><a href="#">Example 2</a></li> 
    <li id="ex3"><a href="#">Example 3</a></li> 
    <li id="ex4"><a href="#">Example 4</a></li> 
    <li id="ex5"><a href="#">Example 5</a></li> 
    <li id="ex6"><a href="#">Example 6</a></li> 
    </ul> 
    </div> 
    <div class="workImages"> 
    <img src="#"> 
    </div> 
</div> 
<footer class="footer">Footer</footer> 
</div> 

CSS

.workList { 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 

.wrapper { 
display: flex; 
min-height: 100%; 
flex-direction: column; 
} 

.workWrapper { 
width: 100%; 
display: flex; 
flex: 1; 
align-items: center; 
} 

.workText { 
float: left; 
width: 30%; 
} 

.workImages { 
float: right; 
width: 70%; 
margin-right: 100px; 
background-color: green; 

img {max-width: 100%;} 

https://jsfiddle.net/symjcfsk/

Answer 1

をそれは多くの方法で可能性があります。たとえば、店舗のイメージのURLへのホバーリンクのdata-* attribules使用することができます影響を与えるのこの種を達成するために、代替の

$(".workList a").hover(function() { 
 
    var s = $(this).data("img"); 
 
    $(".workImages img").attr("src", s); 
 
});

.workList { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.workWrapper { 
 
    width: 100%; 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.workText { 
 
    float: left; 
 
    width: 30%; 
 
} 
 

 
.workImages { 
 
    float: right; 
 
    width: 70%; 
 
    margin-right: 100px; 
 
    background-color: green; 
 
    img { 
 
    max-width: 100%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <div class="workWrapper"> 
 
    <div class="workText"> 
 
     <ul class="workList"> 
 
     <li><a href="#" data-img="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded">Example 1</a></li> 
 
     <li><a href="#" data-img="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png">Example 2</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="workImages"> 
 
     <img src="#"> 
 
    </div> 
 
    </div> 
 
    <footer class="footer">Footer</footer> 
 
</div>

Answer 2

ワン「のMouseEnter」と「マウスアウトを利用することです"イベント。

$(".workList").on("mouseenter",function(event){ 
    var list_elem = event.target; 
    // your code to change the background image accordingly. 
}); 

同様に、デフォルトの画像を復元するには：

$(".workList").on("mouseout",function(event){ 
    // Restore the default image. 
}); 

ホバリング時に、我々は、画像を変更しないように、さらなる最適化を背景に使用する最後の画像を追跡することによって行うことができ、このような何か再び同じリンクを介して

Answer 3

純粋なHTML & CSSは私がのIMG SRC変更スタイルをシミュレートし、背景色を使用して以下の私のデモ で、インポートJSを必要とする、仕事をすることができない、ユニークな機能は非常に簡単です `

var mouseover = function (index) { 
 
    \t document.getElementById('workImages').className = 'workImages bgcolor' + index; 
 
    }

.workList { 
 
    list-style-type: none; 
 
    width: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.workList& >li { 
 
    padding: 10px 5px; 
 
} 
 
.workList a { 
 
    width: inherit; 
 
    display: block; 
 
} 
 

 
.wrapper { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    min-height: 100%; 
 
    flex-direction: column; 
 
} 
 

 
.workWrapper { 
 
    width: 100%; 
 
    height: 230px; 
 
    display: flex; 
 
    flex: 1; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
.workText { 
 
    position: absolute; 
 
    width: inherit; 
 
} 
 

 
.workImages { 
 
    width: 100%; 
 
    margin-right: 100px; 
 
    height:inherit; 
 
    background-color: #E1BEE7; 
 
    transition-duration: 0.5s; 
 
} 
 
.workImages.bgcolor1 { 
 
    background-color: #CE93D8; 
 
} 
 
.workImages.bgcolor2 { 
 
    background-color: #CE93D8; 
 
} 
 
.workImages.bgcolor3 { 
 
    background-color: #BA68C8; 
 
} 
 
.workImages.bgcolor4 { 
 
    background-color: #AB47BC; 
 
} 
 
.workImages.bgcolor5 { 
 
    background-color: #9C27B0; 
 
} 
 
.workImages.bgcolor6 { 
 
    background-color: #8E24AA; 
 
}

<div class="wrapper"> 
 
    <header class="header">Header</header> 
 
    <div class="workWrapper"> 
 
    <div class="workText"> 
 
     <ul class="workList"> 
 
     <li id="ex1"><a href="#" onmouseover="mouseover(1)">Example 1</a></li> 
 
     <li id="ex2"><a href="#" onmouseover="mouseover(2)">Example 2</a></li> 
 
     <li id="ex3"><a href="#" onmouseover="mouseover(3)">Example 3</a></li> 
 
     <li id="ex4"><a href="#" onmouseover="mouseover(4)">Example 4</a></li> 
 
     <li id="ex5"><a href="#" onmouseover="mouseover(5)">Example 5</a></li> 
 
     <li id="ex6"><a href="#" onmouseover="mouseover(6)">Example 6</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="workImages" id="workImages"> 
 
     <!-- use bgcolor instead of img for display--> 
 
     <!--<img src="#">--> 
 
    </div> 
 
    </div> 
 
    <footer class="footer">Footer</footer> 
 
</div>