наведение на элементы, вызывающие наведение другого элемента.В чем проблема?

Question

Соответствующий html:

<div class="bottom-page">
    <p>What is <span class="carmeet">CarMeet?</span></p>
</div>

<div class="definitions">

    <span class="n1"><p><span class="carmeet1">CarMeet</span> is the number 
  one website for fans of cars, and car enthusiasts alike.</p></span>

    <span class="n2"><p><span class="style2">Find</span> riders in your 
  local area, state, region, or country. <span class="style2">Cruise</span> 
 along.</p>

    <span class="n3"><p><span class="style2">Create</span> and <span 
 class="style2">Join</span> crews to drift along with. Stay up-to-date with 
your group <span class="style2">Online</span> or on <span 
class="style2">Adventures</span>.</p></span>

    <span class="n4"><p>Actively<span class="style2"> engage</span> in the 
 community through the online <span class="style2">forum</span>.</p></span>

    <span class="n5"><p><span class="style2">Coast</span> through countless 
   <span class="style2">news articles</span> to find out what else is 
  happening in 
   the <span class="style2">world of automobiles</span>, and find what's 
  available 
 on the <span class="style2">market</span>.</p></span>


</div>

</div>

Соответствующий css;

.n1:hover {
  outline-style: solid;
  background-color: lightgreen;
  opacity: 0.8;
  color: black;
 }
 .n2:hover {
  outline-style: solid;
  background-color: lightblue;
  opacity: 0.8;
  color: black;
 }
.n3:hover {
  outline-style: solid;
  background-color: lightcoral;
  opacity: 0.8;
  color: black;
}
.n4:hover {
  outline-style: solid;
  background-color: lightyellow;
  opacity: 0.8;
  color: black;
 }
 .n5:hover {
   outline-style: solid;
   background-color: #9558a0;
   opacity: 0.8;
   color: black;
 }

Я уверен, что есть сотни других вопросов, касающихся той же вещи, но я не могу найтитот, который помогает моему делу.Когда я наводю курсор мыши на n3-n5, запускается n2.Этого не происходит при зависании n1.Очень ценю и извиняюсь за то, что являюсь нубом.

Answer 1

не закрывать тег span на <span class="n2">

<span class="n2"><p><span class="style2">Find</span> riders in your 
  local area, state, region, or country. <span class="style2">Cruise</span> 
 along.</p></span>

Answer 2

Вы пропустили один закрывающий интервал во втором:

Я внес изменения, проверьте также сделайте интервал display:block;

<div class="bottom-page">
    <p>What is <span class="carmeet">CarMeet?</span></p>
</div>

<div class="definitions">

    <span class="n1"><p><span class="carmeet1">CarMeet</span> is the number 
  one website for fans of cars, and car enthusiasts alike.</p></span>

    <span class="n2"><p><span class="style2">Find</span> riders in your 
  local area, state, region, or country. <span class="style2">Cruise</span> 
      along.</p></span>

    <span class="n3"><p><span class="style2">Create</span> and <span 
 class="style2">Join</span> crews to drift along with. Stay up-to-date with 
your group <span class="style2">Online</span> or on <span 
class="style2">Adventures</span>.</p></span>

    <span class="n4"><p>Actively<span class="style2"> engage</span> in the 
 community through the online <span class="style2">forum</span>.</p></span>

    <span class="n5"><p><span class="style2">Coast</span> through countless 
   <span class="style2">news articles</span> to find out what else is 
  happening in 
   the <span class="style2">world of automobiles</span>, and find what's 
  available 
 on the <span class="style2">market</span>.</p></span>


</div>

</div>





.definitions > span {
  display: block;
}

.n1:hover {
  outline-style: solid;
  background-color: lightgreen;
  opacity: 0.8;
  color: black;
}

.n2:hover {
  outline-style: solid;
  background-color: lightblue;
  opacity: 0.8;
  color: black;
}

.n3:hover {
  outline-style: solid;
  background-color: lightcoral;
  opacity: 0.8;
  color: black;
}

.n4:hover {
  outline-style: solid;
  background-color: lightyellow;
  opacity: 0.8;
  color: black;
}

.n5:hover {
  outline-style: solid;
  background-color: #9558a0;
  opacity: 0.8;
  color: black;
}

Answer 3

n5, n4 и n3 все используют класс style2 у своих детей.Создайте разные классы для каждого дочернего диапазона, чтобы иметь отдельные эффекты при наведении.