Question

Website in Question

我想要发生的是当有人徘徊3个按钮中的一个＆＃34;签名事件＆＃34; ＆＃34;婚礼＆＃34; ＆＃34; Le Coq d＆＃39;或＆＃34;它上面的div的背景和内容发生了变化。它上面的div是静态的，它不是滑块。只是一个风格化的HTML块。

我在上周左右开始进入JS，这似乎可以用JS开关完成，但我不确定。我甚至不知道要搜索什么来获取相关信息。

谢谢！

Answer 1

您可以将数据属性与目标类和一点点jQuery代码一起使用。

$('button').hover(
  function() {
    $('header').addClass($(this).attr("data-class")).text($(this).attr("data-title"));
  }, function() {
    $('header').removeClass($(this).attr("data-class")).text($('header').attr("data-title"));
  }
);

header{
  background-image: url('http://lorempixel.com/200/600/');
  background-size: cover;
  height: 180px;
  width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

header.backgroundOne{
  background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundTwo{
  background-image: url('http://lorempixel.com/200/600/');
}
header.backgroundThree{
  background-image: url('http://lorempixel.com/200/600/');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header data-title="Header Image">
  Header Image
</header>
<button data-class="backgroundOne" data-title="Title One">
  Change Header 1
</button>
<button data-class="backgroundTwo" data-title="Title Two">
  Change Header 2
</button>
<button data-class="backgroundThree" data-title="Title Three">
  Change Header 3
</button>

因此，如果您将鼠标悬停在按钮上，则此按钮中的数据类属性值将作为类添加到标题元素中。如果您停止悬停，则会再次删除该类，以便显示默认图像。

Answer 2

对于这样的问题，我总是觉得需要提供一个只有CSS的答案，因为我认为现在使用太多的JavaScript（特别是JQuery）来执行可以用纯CSS完成的任务。大多数但并不总是CSS更高效，因为它不能被执行并被缓存。

请参阅下面的代码段。它使用flexbox和order css rule，它们都有相当不错的浏览器支持（除非你必须支持像旧的Internet Explorer版本这样的残缺浏览器）。

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

button {
  flex: 0 0 auto;
  height: 20px;
  margin: 0 18px;
}

.wrapper > div {
  display: none;
  width: 100%;
  height: 100px;
  margin: 36px 0 18px 0;
  
  order: -3; /* place the divs before the buttons */
}

#content-0 {
  display: block;
  background: cyan;
}

#content-1 {
  background: hotpink;
}

#content-2 {
  background: red;
}

#content-3 {
  background: blue;
}

#btn-1:hover ~ #content-1,
#btn-2:hover ~ #content-2,
#btn-3:hover ~ #content-3 {
  display: block;
}

#btn-1:hover ~ #content-0,
#btn-2:hover ~ #content-0,
#btn-3:hover ~ #content-0 {
  display: none;
}

<div class="wrapper">
  <button id="btn-1">Button 1</button>
  <button id="btn-2">Button 2</button>
  <button id="btn-3">Button 3</button>

  <div id="content-0">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
  </div>
  <div id="content-1">
    A wonderful serenity has taken possession of my entire soul, like 
  </div>
  <div id="content-2">
    One morning, when Gregor Samsa woke from troubled dreams, he  
  </div>
  <div id="content-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A
  </div>
</div>

（显然，div可以根据你的需要填充和设置样式）

如何使鼠标悬停按钮可更改不同元素的背景

2 个答案: