I have a pair of adjacent div elements and I want to modify the background-color attribute of both when the user hovers over one of them.
Initially, both divs should have a background-color set to #d8d8d8, and this color should change to #cacaca on both divs when hovering over either one.
I was able to accomplish this using jQuery:
$("#FOO").hover
(
function()
{
$(this).css("background-color","#CACACA");
$("#BAR").css("background-color","#CACACA");
},
function()
{
$(this).css("background-color","#D8D8D8");
$("#BAR").css("background-color","#D8D8D8");
}
)
$("#BAR").hover
(
function()
{
$(this).css("background-color","#CACACA");
$("#FOO").css("background-color","#CACACA");
},
function()
{
$(this).css("background-color","#D8D8D8");
$("#FOO").css("background-color","#D8D8D8");
}
).buttons {
border:1px solid black;
background-color: #D8D8D8;
height: 100px;
font-family: play;
font-size: 30px;
text-align:center;
vertical-align: middle;
line-height: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-10 buttons" id="FOO" style="border-right: 0px">
<span style="padding-left:100px">FOO</span>
</div>
<div class="col-xs-2 buttons" id="BAR" style="border-left: 0px">
<span>BAR</span>
</div>Is there an alternative method to achieve this effect? Perhaps using only CSS?