Question

我有不同类的菜单，我想在men7和men8上使用鼠标悬停更改背景颜色

＆＃13;

$(document).ready(function() {
  $('.men4').mouseover(function() {
    $(this).menu ul ul('background-color', 'yellow');
  });
});

＆＃13;

.menu ul ul {
  background-color: rgba(128, 255, 255, 0.96);
  display: inline-flex;
  width: 100%;
}

＆＃13;

<nav class="menu">
  <ul class="lvl-0">
    <li class="men1">
      <ul class="submenu lvl-1">
        <div class="container ">
          <div class="grid">
          </div>
        </div>
      </ul>
      <li class="men2">
        <li class="men3">
          <li class="men4">
            <li class="men5">
              <li class="men6">
  </ul>
</nav>

＆＃13;

我尝试使用jQuery，但它不起作用：/

出了什么问题？

Answer 1

我想从问题的背景来看，你需要这个：

＆＃13;

$('.men5, .men6').hover(function() {
    $('.menu ul ul').css('background', 'yellow');
  },
  function() {
    $('.menu ul ul').css('background', 'rgba(128, 255, 255, 0.96)');
  }
);

＆＃13;

.menu ul ul {
  background-color: rgba(128, 255, 255, 0.96);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="menu">
  <ul class="lvl-0">
    <li class="men1">
      <ul class="submenu lvl-1">
        <div class="container ">
          <div class="grid">
            I am going to be Yellow on hover
          </div>
        </div>
      </ul>
      <li class="men2"></li>
      <li class="men3"></li>
      <li class="men4"></li>
      <li class="men5">Hover me for Yellow</li>
      <li class="men6">Hover me for Yellow</li>

  </ul>
</nav>

＆＃13;

Answer 2

如果你想使用jQuery：

 $(document).ready(function() {
        $('.men7 .men8').hover(function(){
            $(this).css('background-color', 'yellow');
        });
    });

如果您想在css文件中使用正确的方法，请添加：

.men7 .men8:hover { background-color: yellow; }

Answer 3

主要错误（如Tushar所说）在你的jquery神秘的“.menu ul ul”中......你只需要使用.css和jquery来改变元素的css属性。

这是错的：

$(this).menu ul ul('background-color', 'yellow');

更改为：

$(this).css('background-color', 'yellow');

现在：您的代码正在更改背景颜色ONCE且仅更改一次。一旦你将鼠标移过它就会保持黄色背景...

检查一下：

JS：

$(document).ready(function() {
    $('.men4').mouseover(function(){
        $(this).css('background-color', 'yellow');
    });
});

HTML：

<nav class="menu">
    <ul class="lvl-0">
        <li class="men1">
            <ul class="submenu lvl-1">
                <div class="container ">
                    <div class="grid">
                    </div>
                </div>
            </ul>
        </li>
        <li class="men2">menu2</li>
        <li class="men3">menu3</li>
        <li class="men4">menu4</li>
        <li class="men5">menu5</li>
        <li class="men6">menu6</li>
    </ul>
</nav>

CSS：

.menu ul ul {  
    background-color:rgba(128, 255, 255, 0.96);
    display:inline-flex;
    width:100%;  
}

这是一个小提琴：

http://jsfiddle.net/jsuqf5w6/5/

编辑：

如果你想在目标以外的地方改变css，只需切换选择器：

$('.men4').mouseover(function(){
    $('.submenu').css('background-color','yellow');
});

我不明白为什么......但这就是你想要的，另一个小提琴：

http://jsfiddle.net/jsuqf5w6/7/

希望它有所帮助！

使用鼠标悬停使用JQuery更改背景颜色

3 个答案: