如何使徘徊不同元素的按钮变化背景

Question

Website in Question

我希望发生的是，当你把光标移动的3个按钮“签名活动”，“婚礼”，“勒柯克d'Or的”之一背景和上面的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的可填充和风格，只要你喜欢）