问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vuejs 鼠标划上去显示,离开时隐藏?

头像
17biu
    1323815

    clipboard.png
    这种写法会造成元素一直闪

    vue.js
    阅读 85k
    7 个回答
    得票最新
    头像
    leftstick
      27.3k33329
      ✓ 已被采纳

      如果硬要用js实现的话，那应该这么写：

      <button class="bi-btn btn-primary bi-btn-end detail" v-on:mouseenter="dataDetails($parent.$index)" v-on:mouseleave="hiddenDetail($parent.$index)"></button>

      但是诚然，css写不是更简单么？如果就是一个单纯的hover

      头像
      代码卡不懂
        3111

        类似问题困扰很久，终于找到了答案。
        核心思路就是利用hover选择器。前提如下：

        1. 两元素有相同父级
        2. 需要隐藏的元素css写为 .child{visibility: hidden}
        3. 父级css .father:hover .child{ visibility: visible; }
          这样就实现了，当鼠标移入需要的元素(也就是移入父级)时，展示需要的元素

        如果是移入入元素，显示子元素，同理，方法基本一致

        不知道这个是不是你想要的结果

        参考资料：http://blog.csdn.net/phoooob/...

        头像
        xiaoluoboding
          2.1k2410
          头像
          biakia
            6015
            头像
            yjhbdbd
              23972934

              你这写法不好看..可以使用transition,配合animate.css,这个有很多效果可以在线看供你选择,写法也很优雅.

              clipboard.png

              clipboard.png
              可以参照

              头像
              紫秋
                132

                用一个对象, 存储当前的正在hover的元素的某个标识符作为键, 用v-on监听鼠标事件, mouseover时设置对应键的值为true, mouseleave时设为false, 想要切换显隐的元素上v-show这个元素在那个对象中对应的键即可.

                这个方法对多个元素适用

                头像
                ryan
                  11
                  新手上路，请多包涵

                  css实现，注意将父元素display属性设置为 inline-block; 否则鼠标从A移入B会自动隐藏 https://www.runoob.com/try/tr...
                  <style>
                  .tooltip {

                  position: relative;
display: inline-block;
border-bottom: 1px dotted black;

                  }

                  .tooltip .tooltiptext {

                  visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* 定位 */
position: absolute;
z-index: 1;

                  }

                  .tooltip:hover .tooltiptext {

                  visibility: visible;

                  }
                  </style>
                  <body style="text-align:center;">

                  <div class="tooltip">鼠标移动到这
                  <span class="tooltiptext">提示文本</span>
                  </div>

                  撰写回答
                  你尚未登录，登录后可以
                  • 和开发者交流问题的细节
                  • 关注并接收问题和回答的更新提醒
                  • 参与内容的编辑和改进，让解决方法与时俱进
                  推荐问题
                  宣传栏