Question

我在代码中使用了弹出菜单，因此，每当我将鼠标悬停在图标上时，它就会显示弹出窗口。

一切正常，但我需要将弹出窗口的状态从悬停更改为活动状态。

意图行为：每当我单击该图标时，都会显示弹出窗口，当我再次单击该图标时，它将关闭它们（如toggle）。

我尝试将悬停状态更改为active，但这部分起作用。弹出窗口会在click上加载毫秒，但我并没有看到切换行为。

我正在添加以下代码，请检查一下。

<template>
    <div class="popup">
        <font-awesome-icon :icon="infoIcon" />
        <span class="tooltip" id="myPopup"> <b>Popupheader</b><br />Popup
            content</span>
    </div>
</template>

<script>
    import FontAwesomeIcon from '@fortawesome/vue-fontawesome';
    import { faInfoCircle } from '@fortawesome/fontawesome-free-solid';


    computed: {
        infoIcon() {
            return faInfoCircle;
        },
    },
</script>


<style>

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.popup .tooltip {
  background: $custom-control-indicator-bg;
  bottom: 100%;
  font-size: 10pt;
  color: $dark-color;
  display: block;
  left: -140px;
  margin-bottom: 15px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  border-radius: 9px 9px 9px 9px;

  width: 300px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.popup .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.popup .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  border-top: solid $custom-control-indicator-bg 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 51%;
  margin-left: -13px;
  position: absolute;
  width: 0;
}

.popup:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);

}
</style>

Answer 1

问题在于，不可点击元素上的：active属性只会触发onclick的开和关效果。您实际上看到了什么。如果您想要切换效果，则有两个选择：

您实际上使用了一个clickable元素来包裹您的跨度，例如按钮
您使用javascript更改了课程

   function myFunction() {
    var element = document.getElementById("myDIV");
    element.classList.toggle("mystyle");
  }

您必须通过将这种功能附加到click事件上来适应这种情况。

如何在vue.js中将弹出式悬停状态更改为活动状态（单击时）

1 个答案: