Question

我有那段代码：

<ul class="top_menu dl-menu menu">
<li data-id="id123" class="megactive"><a href="/avis">Produits</a>

<ul class="dl-submenu">
    <li><a href="/huile">&Agrave; base d&#39;huile</a></li>
    <li><a href="/comprimes">Comprim&eacute;s</a></li>
    <li><a href="/training-booster">Bruleur de graisses/Protection du foie</a></li>
    <li><a href="/">Packs</a></li>
</ul>
</li>
<li><a href="/apropos">Qui sommes-nous</a></li>
<li><a href="/comment-utiliser">Mode d&#39;utilisation</a>
<ul class="dl-submenu">
    <li><a href="/huile">&Agrave; base d&#39;huile</a></li>
    <li><a href="/comprimes">Comprim&eacute;s</a></li>
    <li><a href="/training-booster">Bruleur de graisses/Protection du foie</a></li>
    <li><a href="/">Packs</a></li>
</ul>
</li>

<div class="megamenu" id="id123">

当我尝试将一些css应用于类megamenu时，我会遇到问题。

所以我想要.megactive：悬停改变.megamenu css。

我该怎么做？

由于

Answer 1

如果您只是想在悬停时切换课程，请查看此内容。添加了使用megactive类悬停在OTHER元素上的功能，并在megamenu-classed元素上更改了CSS。

希望这有帮助！

＆＃13;

$(".megamenu").hover( function(){
  $(this).addClass("megactive");
}, function (){
  $(this).removeClass("megactive")
});

$(".megactive").hover( function(){
  $(".megamenu").addClass("doTheOverThing");
  // And maybe do a manual CSS change...
  $(".megamenu").css("border", "1px dotted blue");
 }, function(){
  $(".megamenu").removeClass("doTheOverThing");
  $(".megamenu").css("border", "inherit");
 });

＆＃13;

.megactive {
  background-color: #cc9;
}

.doTheOverThing {
  background-color: #99c;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="top_menu dl-menu menu">
<li data-id="id123" class="megactive"><a href="/avis">Produits</a>

<ul class="dl-submenu">
    <li><a href="/huile">&Agrave; base d&#39;huile</a></li>
    <li><a href="/comprimes">Comprim&eacute;s</a></li>
    <li><a href="/training-booster">Bruleur de graisses/Protection du foie</a></li>
    <li><a href="/">Packs</a></li>
</ul>
</li>
<li><a href="/apropos">Qui sommes-nous</a></li>
<li><a href="/comment-utiliser">Mode d&#39;utilisation</a>
<ul class="dl-submenu">
    <li><a href="/huile">&Agrave; base d&#39;huile</a></li>
    <li><a href="/comprimes">Comprim&eacute;s</a></li>
    <li><a href="/training-booster">Bruleur de graisses/Protection du foie</a></li>
    <li><a href="/">Packs</a></li>
</ul>
</li>
<div class="megamenu" id="id123">
Foo
</div>

＆＃13;

Answer 2

请参阅.hover()

$(".megamenu").hover(
  function () {
    $(this).addClass("hover");
  }, function () {
    $(this).removeClass("hover");
  }
);

用Jquery更改div类

2 个答案: