Need some help with CSS on my WordPress site. I want to change the opacity of a div column when hovering over another one. Specifically, I would like the cat box to become semi-transparent when hovering over the dog box.
Here is the CSS code I am using:
.dog_box {
height: 200px;
width: 200px;
background-color: #000000;
float:left;
}
.cat_box {
height: 200px;
width: 200px;
background-color: red;
float:left;
}
.dog_box:hover .cat_box{
opacity:0.5;
}You can see the HTML structure below:
<div class="dog_box"></div><div class="cat_box"></div>I seem to be encountering an issue with this setup and would appreciate any insights or suggestions. Here is the link to my site for reference: Parapet Care Site