如何基于懸停將類添加到僅選定的div

我正在嘗試向主選單div添加類，但由于某種原因，它向兩個 div 添加了類，div 具有相同的類，我只想將類添加到選定的 div。

<div class="main-coloumn">
    <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-coloumn').find('.class .mainmenu').toggleClass('class_name');
    });
  });
}(jQuery));

uj5u.com熱心網友回復：

我想你可能想要這樣的東西：

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

uj5u.com熱心網友回復：

作業演示： 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-coloumn">
    <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>

標籤：javascript 查询

上一篇：如何在antlr4中獲取多個命令？

下一篇：使用存盤到另一個物件中的值過濾json元素