CODEWITHSUNDEEP
htmlcsscss-selectors
kakki
kakki

Reputation: 1

hovering over an element triggers an effect on another element

We were given an assignment on Events and I’m kind of having a hard time figuring out. I actually have tried making my own code but I had it checked here and it apparently had a lot of errors and although they did explain what were the errors, I couldn’t really understand it and now I’m kind of embarrassed to show what I already tried so I’m just going to ask you guys to help me.

I want it that if I hover over a class “one”, div class “sqt” will have a 10px dotted green border, a background of lightgreen and a font color of #eca261 such as the photo below.

<a class="one" href=#>First Link</a>
<a class="two" href=#>Second Link</a>
<br><br>
<div class="sqo">Div 1 here</div>
<br>
<div class="sqt">Div 2 here</div>

image.jpg

Upvotes: 0

Views: 112

Answers (1)

Gerard
Gerard

Reputation: 15786

Here you go. CSS is explained in the code.

Specific item to study: general sibling combinator

/*
  When class one is hovered, find the sibling with class sqt
*/
.one:hover ~ .sqt {
  font: #eca261;
  background: lightgreen;
  border: 10px dotted green;
}
<a class="one" href=#>First Link</a>
<a class="two" href=#>Second Link</a>
<br><br>
<div class="sqo">Div 1 here</div>
<br>
<div class="sqt">Div 2 here</div>

Upvotes: 2

Related Questions