Question

让我用几句话解释一下。我有一个带有不同颜色按钮的菜单。例如，当我鼠标悬停/单击按钮A（=蓝色例如）时，我希望div的bgcolor也变为蓝色当我mouseover/click按钮B（=green）时，我希望div的bgcolor也变为绿色。

是否有可能使用简单的脚本？

<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 * /

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

Answer 1

使用此功能开始您可以使用自己的编码逻辑来增强此功能。

$('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>

Answer 2

尝试使用jquery：

$("#[id]").hover(function({
  $("#[id]").css({"[propertyname]":"[value]","[propertyname]":"[value]",...});

/ *

使用正确的ID /类和属性名称和值填充括号。如果要更改单击背景，请将.hover替换为.click

* /

如果有人发现我做错了或者有更好的方法，请纠正我或让我知道！我总是乐于接受更好的想法！：）

Answer 3

如果您要使用CSS，那么只有两种方法可以通过另一种状态更改元素的样式：

目标元素必须是接收状态更改的元素的子元素，或者是直接兄弟元素（右下方）。

使用CSS＆＃34; +＆＃34;选择器，你可以影响下一个兄弟元素。在您的情况下，这可用于实现此效果：

https://jsfiddle.net/Lrptjoh9/

行动发生在这里：

.a .button:hover + .bg {
    background: red;
}

.b .button:hover + .bg {
    background: blue;
}

虽然这需要按钮和背景元素为兄弟姐妹。

Answer 4

我就是这样做的：

$("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

根据您在编辑中提供的内容修复后的完整代码：

<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>

Answer 5

Vanilla 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>

背景颜色按钮与背景颜色div相同

5 个答案: