Use of hover selector is invalid
Let’s start by pointing out the question and first talk about the conclusion. The parent component z-index is negative, and the mouse cannot be located on the component at all.
I was in a complicated mood, so I came to tell my brothers a joke and be happy.
This is the thing. Today I want to implement a very simple function. If you move the mouse up, you will give users a certain prompt based on the component type. Using the CSS hover selector, it is very simple to implement it. Take out the keyboard, and do it with a bang and it will be completed. The code is probably that simple
.taskAction i:hover{
color:red;
}As a result, the project has no prompt effect at all. I was confused. The code was too simple and I didn’t know where to start to solve it. I operated it through Baidu and Google, and the result was probably a space after the colon, the type name was wrong, and the order of link active...
It is obvious at a glance that my mistakes are not the same, but they have no effect and he is sure that my mistakes are wrong. So what are you wrong?
I just stared at those simple lines of code. After watching for an hour, it was useless and I couldn't see it at all. So I made up my mind, opened my vision, and adjusted other components. This debugging almost made me feel hypertensive.
Show the code for you
.taskBody{
position: relative;
font-size: 18px;
background:black;
width:400px;
height:900px;
color:#BBBBBB;
z-index:-10;
}At this point, you should be able to see what the problem is. z-index:-10 (Article, z-index seems to be only effective under position: relative/absolute conditions) Ah, Shente Meow-10, hover is a mouse selector, which takes effect when the mouse passes through the component, and various changes are made. My component's z-axis is set to -10, how can it pass through the component? Is this a plot that normal people can think of? I admire myself.
Because of this seemingly simple problem, a lot of time wasted, so I wrote it down and let more people see it.
vue's hover mouse hover event
There is no hover in vue, you can use the css pseudo-class: hover or @mouseenter @mouseleave @mouseover @mouseout etc. to deal with similar requirements
The above is personal experience. I hope you can give you a reference and I hope you can support me more.