如何使徘徊不同元素的按钮变化背景
问题描述:
Website in Question如何使徘徊不同元素的按钮变化背景
我希望发生的是,当你把光标移动的3个按钮“签名活动”,“婚礼”,“勒柯克d'Or的”之一背景和上面的div的内容发生了变化。它上面的div是静态的,它不是一个滑块。只是一个样式化的HTML块。
我刚开始在上周左右进入JS,这似乎可以用JS开关完成,但我不确定。我甚至不知道要搜索什么才能获取相关信息。
谢谢!
答
你可以使用目标类和一点点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>
所以,如果你将鼠标悬停一个按钮,该按钮的数据级属性值添加为一个类你的头元素。如果停止悬停,则会再次删除该类,以便显示默认图像。
答
对于这样的问题,我总是觉得需要提供一个仅用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的可填充和风格,只要你喜欢)
完美的,我知道这是简单的东西。我的头文件内容也会发生变化。例如,当悬停在“婚礼”按钮上时,标题上的文字将变为婚礼,并在下面有一行副本。我将如何让内容切换? – kezey
我更新了片段。如果没问题,请接受答案。谢谢 – emjay