如何基于悬停将类添加到仅选定的 div答案

【问题标题】：How to add class to only selected div based on hover如何基于悬停将类添加到仅选定的 div
【发布时间】：2021-12-31 02:50:47
【问题描述】：

我正在尝试向 mainmenu div 添加类，但由于某种原因它向两个 div 添加类，div 具有相同的类，我只想将类添加到选定的 div。

<div class="main-column">
    <div id="col1">
        <div class="hidden">hidden text</div>
    </div>
    <div id="col2" class="class">
        <div class="menubox">
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
        </div>
        <div class="menubox">
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
        </div>
    </div>
    <div id="col3" class="class">
        <div class="mainmenu">
            <div class="menubox">
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
            </div>
        </div>
        <div class="mainmenu">
            <div class="menubox">
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
            </div>
        </div>
    </div>
</div>

这是我的 JQUERY 代码。

(function($) {
  $(document).ready(function() {
    $('.menubox .toggleClass').hover(function() {
      // fade in the div in this object.
      $(this).closest('.main-column').find('.class .mainmenu').toggleClass('class_name');
    });
  });
}(jQuery));

【问题讨论】：

几个问题：（1）你的页面可以有多少个main-coloumnclasses/div？ (2)col3中有2个mainmenu div。你如何决定向哪个mainmenu 添加课程？

标签： javascript jquery

【解决方案1】：

我想你可能想要这样的东西：

    (function($) {
        $( document ).ready( function() {
            $('.menubox .toggleClass').hover(function () {
                var mine. = $(this).closest('.mainmenu');
                $(this).closest('.main-column').find('.mainmenu').not( mine ).removeClass('class_name');
                mine.addClass('class_name');
            });
        });
    }(jQuery));

【讨论】：

感谢您的回答，我只想在我们将鼠标悬停在 col2 div .menubox .toggleClass 上时添加类，悬停后它应该将类添加到第 3 列 .mainmenu 类
@WaleedAfridi 我认为您应该在您的问题中正确澄清这一点。您的问题对您要达到的目标不是很清楚。
@SangSuantak 非常感谢，我们非常接近解决方案，我录制了一个小视频来解释这个问题，我希望这能解决我的要求。这是video

【解决方案2】：

工作演示： https://dojo.telerik.com/IJoBeCeT/2

(function($) {
  $(document).ready(function() {
    $('.menubox .toggleClass').hover(function() {
      // fade in the div in this object.
      $(this).parents('.mainmenu').toggleClass('class_name');
    });
  });
}(jQuery));

.class_name {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-column">
    <div id="col1">
        <div class="hidden">hidden text</div>
    </div>
    <div id="col2" class="class">
        <div class="menubox">
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
        </div>
        <div class="menubox">
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
            <a class="toggleClass">toggleClass</a>
        </div>
    </div>
    <div id="col3" class="class">
        <div class="mainmenu">
            <div class="menubox">
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
            </div>
        </div>
        <div class="mainmenu">
            <div class="menubox">
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
                <a class="toggleClass">toggleClass</a>
            </div>
        </div>
    </div>
</div>

【讨论】：

非常感谢，我们非常接近解决方案，我录制了一个小视频来解释这个问题，我希望这会清除我的请求。这是video