Цвет фона кнопка такая же, как цвет фона div

Позвольте мне объяснить это в нескольких словах. У меня есть меню с разными цветными кнопками. Например, когда я нажимаю кнопку мыши/кнопку A (= синий, например), я хочу, чтобы bgcolor div также стал синим.
Когда я mouseover/click кнопка B (=green) Я хочу, чтобы bgcolor из div также стал зеленым.Цвет фона кнопка такая же, как цвет фона div

Есть ли возможность этого с помощью простого сценария?

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

источник

2015-10-28 Jorus

Вы должны использовать простой JQuery для этого. Дайте нам некоторые из вашего кода, пожалуйста. –

Хорошо, где ваш код? –

Это, как я хотел бы сделать это:

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

источник

2015-10-28 10:59:01

Я пробовал, но он просто не работает внутри моего сайта. Я помещаю javascript между headtags, но он просто не зависает. – Jorus

@Jorus Попробуйте поместить код в код '$ (document) .ready()' в конце страницы ur. Причиной может быть последовательность, в которой ur и элементы ur загружаются и выполняются. –

Да, я уже пробовал, но я думаю, что сделал это неправильно. ' ' – Jorus

Используйте это для начала вы можете улучшить это с вашей собственной кодирования логики.

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

источник

2015-10-28 10:47:40 imGaurav

Разве это невозможно решить с помощью «inherit»? Я бы хотел опубликовать код, но я не знаю, как -.- – Jorus

https://jsfiddle.net/ – imGaurav

Попробуйте использовать JQuery:

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

Заполните скобки с правильными IDS/классов и имен свойств и значений. Если вы хотите изменить цвет фона на клик затем заменить .hover с .click

Если кто-то находит что-то я сделал не так или если есть лучший способ сделать это, пожалуйста, поправьте меня, или дай мне знать! Я всегда готов к лучшим идеям! :)

источник

2015-10-28 10:54:12 ironspeed12

Если вы собираетесь использовать CSS, есть только два пути изменения стиля элемента через состояние другого:

Целевой элемент должен быть либо потомком элемента, получавшие состояние изменения или прямого брата (справа внизу).

Используя селектор «+» CSS, вы можете повлиять на следующий элемент родства. В вашем случае это может быть использовано для достижения этого эффекта:

https://jsfiddle.net/Lrptjoh9/

Действие происходит здесь:

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

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

Хотя это требует кнопки и элементы фона, чтобы быть братьями и сестрами.

источник

2015-10-28 10:54:50 leuquim

Спасибо всем! Я думаю, что решения Ahs N и leuquim помогут мне дальше. – Jorus

Ну, было хорошо, чтобы быть правдой. Он просто не работает на моем сайте. Позвольте мне быть более конкретным (извините, но я просто не знаю, как добавить код). У меня есть один широкий div (называемый .navigation) с ним в меню различных блоков со всеми разными размерами (вид мозаики). Когда я наведите указатель мыши/щелкните по кнопке, я хочу, чтобы «div .navigation» получило тот же цвет, что и кнопка. – Jorus

Это что-то вроде http://jsfiddle.net/g7brnb9q/ – Jorus

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>

источник

2015-10-28 11:19:46 Zhansingsong

Цвет фона кнопка такая же, как цвет фона div

ответ

Смежные вопросы