[javascript] 마우스 오버 또는 호버 vue.js

vue.js의 요소 위로 마우스를 가져갈 때 div를 표시하고 싶습니다. 하지만 작동하지 않는 것 같습니다.

vue.js에 hover 또는 mouseover에 대한 이벤트가없는 것 같습니다. 정말 사실인가요?

jquery hover 및 vue 메서드를 결합 할 수 있습니까?

답변

여기에 당신이 요구하고 있다고 생각하는 실제적인 예가 있습니다.

 <div id="demo">
        <div v-show="active">Show</div>
        <div @mouseover="mouseOver">Hover over me!</div>
    </div>

var demo = new Vue({
    el: '#demo',
    data: {
        active: false
    },
    methods: {
        mouseOver: function(){
            this.active = !this.active;
        }
    }
});

답변

나는 호버에 대한 위의 논리가 잘못되었다고 생각합니다. 마우스가 움직일 때 반대입니다. 나는 아래 코드를 사용했습니다. 완벽하게 잘 작동하는 것 같습니다.

<div @mouseover="upHere = true" @mouseleave="upHere = false" >
    <h2> Something Something </h2>
    <some-component v-show="upHere"></some-component>
</div>

vue 인스턴스에서

data : {
    upHere : false
}

도움이되는 희망

답변

여기에는 방법이 필요하지 않습니다.

HTML

<div v-if="active">
    <h2>Hello World!</h2>
 </div>

 <div v-on:mouseover="active = !active">
    <h1>Hover me!</h1>
 </div>

new Vue({
  el: 'body',
  data: {
    active: false
  }
})

답변

자식 또는 형제 요소를 표시하려면 CSS로만 가능합니다. 당신이 사용하는 경우 :hover콤비 전에 ( +, ~, >, space). 그런 다음 스타일은 호버링 된 요소에 적용되지 않습니다.

HTML

<body>
  <div class="trigger">
    Hover here.
  </div>
  <div class="hidden">
    This message shows up.
  </div>
</body>

CSS

.hidden { display: none; }
.trigger:hover + .hidden { display: inline; }

답변

mouseover및 mouseleave이벤트를 사용 하여이 로직을 구현하고 렌더링의 값에 반응하는 토글 함수를 정의 할 수 있습니다.

이 예를 확인하십시오.

var vm = new Vue({
	el: '#app',
	data: {btn: 'primary'}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">


<div id='app'>
    <button
        @mouseover="btn='warning'"
        @mouseleave="btn='primary'"
        :class='"btn btn-block btn-"+btn'>
        {{ btn }}
    </button>
</div>

스 니펫 확장

답변

함께 mouseover에만 요소 숙박 볼 나는이 추가 마우스 나뭇잎 떴다 요소, 그래서 때 :

@mouseover="active = !active" @mouseout="active = !active"

<script>
export default {
  data(){
   return {
     active: false
   }
 }
</script>

답변

구성 요소 템플릿 내에서 엄격하게 마우스 오버시 클래스를 전환 할 수 있지만 명백한 이유로 실용적인 솔루션은 아닙니다. 반면에 프로토 타이핑의 경우 스크립트 내에서 데이터 속성이나 이벤트 핸들러를 정의 할 필요가 없다는 것이 유용하다는 것을 알게되었습니다.

다음은 Vuetify를 사용하여 아이콘 색상을 실험하는 방법의 예입니다.

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

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-toolbar color="black" dark>
      <v-toolbar-items>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('pink--text')" @mouseleave="e => e.target.classList.toggle('pink--text')">delete</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('blue--text')" @mouseleave="e => e.target.classList.toggle('blue--text')">launch</v-icon>
        </v-btn>
        <v-btn icon>
          <v-icon @mouseenter="e => e.target.classList.toggle('green--text')" @mouseleave="e => e.target.classList.toggle('green--text')">check</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </v-app>
</div>

스 니펫 확장