마우스 오버를 구현하려면 어떻게 해야 합니까?마우스 오버를 구현하려면 어떻게 해야 합니까?VueJs에서요?

마우스 오버를 구현하려면 어떻게 해야 합니까?

VueJs에서요?

UL용 마우스 오버 기능의 실장에 도움이 되는 것은, 같은 클래스를 사용하는 UL 태그 세트가 템플릿에 있습니다만, 마우스 오버(마우스 오버의 테두리 색 변경)를 실장하려고 하면, 그 클래스의 UL 태그가 모두 강조 표시됩니다.나는 VUE에 꽤 익숙하지 않다.

템플릿

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/notification.png" alt="" height="30" width="30">
  <span> Notification  </span>
</ul>

<ul v-bind:class="[sbitmcls]"  @mouseover="mouseOver" @mouseleave="mouseOut">
  <img src="../assets/message.png" alt="" height="30" width="30">
  <span> Message  </span>
</ul>

대본

data() {
  return {
    sbitmcls: "image",
    active: true
    };
  },
  methods: {
    onClick() {
    this.$router.push("/homepage");
  },
  mouseOver: function(name) {
    this.sbitmcls = "imageSelected"
  },
  mouseOut: function() {
    event.target.style.background = "#4a4b45";
  }
}

스타일:

.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.imageSelected {
  display: relative;
  background-color: #575a51;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid blue;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

이것을 구현하는 더 좋은 방법이 있을까요?

고마워요.

이것은 의사 클래스를 사용하는 CSS에서 거의 완전하게 실행할 수 있습니다.

.image {
  /* your CSS for the image class */
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}

템플릿에 필요한 것은

<ul class="image" @mouseover.once="$event.target.classList.add('hovered')">

이것에 의해,hovered요소를 마우스로 처음 표시하면 파란색 테두리 색상이 유지되고 배경색이 기본값으로 돌아갑니다.

new Vue({el: '#app'})

.image {
  display: relative;
  background-color: #4a4b45;
  color: white;
  font-family: Rubik, "Bookman", Garamond, "Times New Roman", Times, serif;
  font-size: 1.2em;
  font-style: bold;
  line-height: 2em;
  height: 5%;
  border-left: 5px solid #4a4b45;
  margin-right: 50px;
  margin: 1px 0;
  padding-left: 1em;
}

.image.hovered, .image:hover {
  border-left-color: blue;
}

.image:hover {
  background-color: #575a51;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Notification  </span>
  </ul>

  <ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
    <img src="https://picsum.photos/30" alt="" height="30" width="30">
    <span> Message  </span>
  </ul>
</div>

클래스를 데이터 값에 바인딩해 보십시오. 예:

 <ul :class="{'imageSelected': selected === true, 'image': selected ===
 false}" @mouseover="mouseOver" @mouseleave="mouseOut"> ... data() {
 return {   selected: false   }; }, methods: {    mouseOver:
 function(name) {    this.selected = true; },

언급URL : https://stackoverflow.com/questions/52619633/how-can-i-implement-mouse-over-on-a-ul-in-vuejs