Question

我正在尝试创建一个简单的页面，其页眉和页脚锚定在浏览器窗口的顶部和底部，并且之间有响应内容。对于内部内容，我使用的是一个flexbox包装器，左边是链接列表（在它自己的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

可能有很多方面。例如，您可以使用悬停链接的data-*属性来存储图像网址：

$(".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”和“mouseout”事件。像这样：

$(".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＆amp; css无法完成这项工作，你需要导入js，下面是我的演示我使用background-color模拟img src改变了样式，独特的功能非常容易 `

＆＃13;

:mergeDebugResources
:processDebugManifest D:\Android\ThePlug\platforms\android\AndroidManifest.xml:27:9-31 Error:
    Attribute meta-data#android.support.VERSION@value value=(25.3.1) from [com.android.support:appcompat-v7:25.3.1] AndroidManifest.xml:27:9-31
    is also present at [com.android.support:support-v4:26.0.0-alpha1] AndroidManifest.xml:27:9-38 value=(26.0.0-alpha1).
    Suggestion: add 'tools:replace="android:value"' to <meta-data> element at AndroidManifest.xml:25:5-27:34 to override.
See http://g.co/androidstudio/manifest-merger for more information about the manifest merger.
:processDebugManifest FAILED
FAILURE: Build failed with an exception.

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

将鼠标悬停在单独div

3 个答案: