當將鼠標懸停在單獨的div中的鏈接列表中時更改div圖像

我試圖創建一個簡單的頁面，頁眉和頁腳錨定在瀏覽器窗口的頂部和底部，其間具有響應內容。對於內部內容，我使用了一個帶有左側鏈接列表（在它自己的div中）的flexbox包裝器，並且使用了圖像右側的另一個div。當將鼠標懸停在單獨的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/

來源

2017-05-29 MMags

你有什麼試過的？您分享的代碼是HTML + CSS，如果您還添加了迄今爲止嘗試使用的JavaScript以及您遇到問題的位置，那將會很有幫助。 –

這可能是由許多方面。例如，你可以使用懸停鏈接data-* attribules存儲圖像的URL：

$(".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/[email protected]?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>

來源

2017-05-29 04:29:27 Alexander

這似乎幾乎正是我想要的。有沒有辦法使用圖像文件而不是URL？用我的.PNGs的路徑替換URL似乎不起作用。 – MMags

@MMags，使用相對URL來識別您的圖像文件。例如：'/ images/myimage.jpg'或'../ images/myimage.jpg'。如果您的圖像和頁面放在同一個文件夾中，請僅使用文件名。有關詳細信息，請參閱[相對URL]（http://www.webreference.com/html/tutorial2/3.html）文章。 – Alexander

一個替代來實現這種影響是利用「的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. 
});

進一步優化可以通過保持用於背景，所以我們不改變圖像的最後一個圖像的軌跡盤旋時完成再次通過相同的鏈接。

來源

2017-05-29 05:36:25

純HTML CSS &不能做的工作，你需要進口的js，下面是我的演示我用背景色模擬IMG SRC改變風格，獨特的功能是很容易 `

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>

來源

2017-05-29 06:07:43

當將鼠標懸停在單獨的div中的鏈接列表中時更改div圖像

回答

相關問題