问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

hover 和 click 问题？

头像
emperor_han
    3131829
    <li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>

    大概的意思就是: 刚开始所有的 span 都是隐藏的，用hover实现 鼠标停在哪个 li它下面的 span 显示。
    然后在用 click 实现点击其中的li，它下面的 span 显示。、
    问题就是现在 点击之后，在将鼠标悬停在 li 上，对应的span并不会显示。

    javascriptcss
    阅读 4.6k
    3 个回答
    得票最新
    头像
    不爱吃西红柿的鱼
      8.2k21124
      ✓ 已被采纳

      这个意思？？？

      <!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
      .hide {
        display: none;
      }
    </style>
  </head>

  <body>
    <ul>
      <li><span>1</span></li>
      <li><span>2</span></li>
      <li><span>3</span></li>
      <li><span>4</span></li>
    </ul>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script>
      $('li').on('click mouseover', function(ev) {
        $('li span').addClass('hide');
        $(this).find('span').removeClass('hide');
      });
    </script>
  </body>

</html>
      头像
      某熊猫桑
        16.1k61547
        li>span {
    opacity: 0;
}
li:hover>span {
    opacity: 1;
}

        大概就是这样吧。剩下的用js绑个click就好~

        头像
        cheapskate
          14611222
          li>span{
display:none;
}
li:hover>span{
display:block;
}

          在js中在click事件里修改属性，将display改为block就行，但想实现点击一个，另一个隐藏，可以这样写

              var lis = document.querySelectorAll('li');
    spans = document.querySelectorAll('span'),
        len1 = lis.length,
        i;
    for (var i = 0; i < lis.length; i++) {
        spans[i].style.display = "";
        lis[i].onclick = function(num) {
            var temp = num,
                len2 = spans.length,
                j;
            return function() {
                for (j = 0; j < len2; j++) {
                    spans[j].style.display = "";
                }
                spans[temp].style.display = 'block';
            };
        }(i);
    };
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题