Как задать css одному элементу при наведении на другой?

Рейтинг: 0Ответов: 3Опубликовано: 30.07.2023

При наведении на .post добавляется .tetle-hover во всех дивах .yota, а мне надо чтобы стиль добавлялся только в пределах одного дива .yota в котором я навожу на .post

$(".post").hover(function () {
  $('.entry-title a').toggleClass("tetle-hover");
});
.tetle-hover {
   background: red;
 }
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  

    
    <div class="yota">
       <div class="post"><a id="dad" href="#d">need-url</a></div>
       <div class="entry-title"><a id="not" href="#d">url</a></div>
    </div>
    <div class="yota">
      <div class="post"><a id="dad" href="#d">need-url</a></div>
       <div class="entry-title"><a id="not" href="#d">url</a></div>
    </div>
    <div class="yota">
      <div class="post"><a id="dad" href="#d">need-url</a></div>
       <div class="entry-title"><a id="not" href="#d">url</a></div>
    </div>

   <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 2

Самый топорный путь:

заменить $('.entry-title a') на $(this).closest('.yota').find('.entry-title a')

▲ 2

Если структура блоков не меняется, а именно:

<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
  <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>

То можно обойтись только CSS:

.post:hover + .entry-title a {
  backround-color: red;
}


.post:hover + .entry-title a {
  background-color: red;
}
<div class="yota">
   <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
   <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>
<div class="yota">
  <div class="post"><a id="dad" href="#d">need-url</a></div>
   <div class="entry-title"><a id="not" href="#d">url</a></div>
</div>

▲ 1

.oneclass:hover ~ .secondclass { css code }