当将鼠标悬停在单独的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图像

回答

相关问题