背景色按钮与背景色div相同
[英]Background color button same as background color div
问题描述
Let me explain it in a few words. 
让我用几句话解释一下。 I have a menu with different colored buttons. 我有一个带有不同颜色按钮的菜单。 For example When I mouseover/click button A (=blue eg) I want the bgcolor of the div also turning blue. 例如，当我将鼠标悬停在/单击按钮A（例如= blue）时，我希望div的bgcolor也变为蓝色。
When I mouseover/click button B ( =green ) I want the bgcolor of the div also turning green. 当我将mouseover/click按钮B（ =green ）时，我希望div的bgcolor也变为绿色。
Is there a possibility to this with a simple script? 一个简单的脚本有可能做到这一点吗？
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").hover(function () {
$(this).parents("navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
/ * CSS * / / * CSS * /
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
5 个解决方案
解决方案1
1 2015-10-28 10:47:40
Use this for start you can enhance this with your own coding logic. 首先，您可以使用自己的编码逻辑来增强此功能。
$('input:button').each(function() { var color = $(this).attr("data-color"); $(this).css("background-color", color); }); $('input:button').click(function() { var color = $(this).attr("data-color") $('#wrapper').css("background-color", color); });
#wrapper { padding: 50px; background-color: #d0e4fe; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wrapper"> <input type="button" name="color" data-color="red" value="Red"> <input type="button" name="color" data-color="green" value="Green"> <input type="button" name="color" data-color="purple" value="Purple"> <input type="button" name="color" data-color="#d0e4fe" value="Default"> </div>
解决方案2
0 2015-10-28 10:54:12
Try using jquery: 尝试使用jQuery：
$("#[id]").hover(function({
$("#[id]").css({"[propertyname]":"[value]","[propertyname]":"[value]",...});
/* / *
Fill the brackets with the correct ids / classes and property names and values. 用正确的ID /类以及属性名称和值填充方括号。 If you want to change the background on a click then replace .hover with .click 如果要更改单击的背景，则将.hover替换为.click
*/ * /
If anyone finds something I did wrong or if there is a better way to do it, please correct me or let me know! 如果有人发现我做错了什么，或者有更好的解决方法，请纠正我或让我知道！ I'm always open to better ideas! 我一直乐于接受更好的想法！ :) :)
解决方案3
0 2015-10-28 10:54:50
If you're going to use CSS, there's only two ways of changing the style of an element through the state of another: 如果要使用CSS，则只有两种方法可以通过另一个元素的状态更改元素的样式：
The targeted element must either be a child of the element receiving a state change, or a direct sibling (right underneath). 目标元素必须是接收状态更改的元素的子元素，或者是直接同级元素（位于其正下方）。
Using CSS's "+" selector, you can affect the next sibling element. 使用CSS的“ +”选择器，可以影响下一个同级元素。 In your case this could be used to achieve this effect: 在您的情况下，可以用来实现此效果：
https://jsfiddle.net/Lrptjoh9/ https://jsfiddle.net/Lrptjoh9/
The action occurs here: 该操作在这里发生：
.a .button:hover + .bg {
background: red;
}
.b .button:hover + .bg {
background: blue;
}
Although this requires the button and background elements to be siblings. 尽管这要求button和background元素为同级。
解决方案4
0 已采纳 2015-10-28 10:59:01
This is how I would do it: 这就是我要做的：
$("button").hover(function () {
$(this).parents("div").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("div").css("background-color", "white");
});
Here is the JSFiddle demo 这是JSFiddle演示
Full code after fix as per what you provided in your edit: 修复后的完整代码（根据您在编辑中提供的内容）：
<html>
<head>
<style>
navigatie {
width:100%;
height:100%;
transition:all 0.4s ease;
}
button {
width:75px;
height:50px;
border-style:none;
top: 20px;
position: relative;
color:white;
border: solid 1px white;
}
.A {
background-color:blue;
}
.B {
width: 200px;
height: 100px;
background-color:limegreen;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("button").hover(function () {
$(this).parents("#navigatie").css("background-color", $(this).css("background-color"));
},
function () {
$(this).parents("#navigatie").css("background-color", "white");
});
});
</script>
</head>
<body>
<div id="container">
<?php include("header.php");?>
<div id="navigatie">
<center>
<button class="A">Button A</button>
<button class="B">Button B</button>
</center>
</div>
<div id="tekst">
BLABLABLA
</div>
</div>
</body>
</html>
解决方案5
0 2015-10-28 11:19:46
Vanilla JavaScript: 香草JavaScript：
var btn = document.getElementById('btnA'); btn.addEventListener('click', function(e) { var event = e || window.event, target = event.target, parent = target.parentNode, color = parent.style.backgroundColor; if(color === 'blue') { parent.style.backgroundColor = 'white'; } else { parent.style.backgroundColor = 'blue'; } }); btn.addEventListener('mouseover', function(e) { var event = e || window.event, target = event.target, parent = target.parentNode; parent.style.backgroundColor = 'blue'; }); btn.addEventListener('mouseout', function(e) { var event = e || window.event, target = event.target, parent = target.parentNode; parent.style.backgroundColor = 'white'; });
.container{ position: relative; width: 200px; height: 100px; text-align: center; } .container button{ position: relative; top: 50%; transform: translateY(-50%); }
<div class='container'> <button id="btnA">Button A</button> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.