Could any one help in implementing a mouse over function for UL, I have a set of UL tags in my template which uses the same class, but when I am trying to implement mouseover(changes border color on mouseover), all the UL tags with that class are getting highlighted. I am pretty new to VUE.
Template
<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>
script
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";
}
}
style:
.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;
}
Is there a better way to implement this?
Thanks,
You can almost completely do this in CSS with the :hover
pseudo-class.
.image {
/* your CSS for the image class */
}
.image.hovered, .image:hover {
border-left-color: blue;
}
.image:hover {
background-color: #575a51;
}
Your template just needs
<ul class="image" @mouseover.once="$event.target.classList.add('hovered')">
This adds the hovered
class to your element when it is first mouse-overed which keeps the blue border color while the background color returns to its default value.
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/[email protected]/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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With