Currently, I have an application that highlights specific areas when hovered over or clicked. While it functions properly, I would like the hover and click effects to be visible on every client, each with an identical overlay setup. I realize my method may not be the best practice, but what I did was configure the span tag (using it once for the elements I want highlighted), as shown in the following code:
span {
border-color: transparent;
border-style: dashed;
border-width: 1.5px;
}
span:hover {
background: rgb(255, 255, 000, 0.5);
border-color: rgb(47, 47, 47);
border-style: dashed;
border-width: 1.5px;
border-radius: 100%;
}
span:active {
background:rgb(255, 185, 015, 0.5);
border-color: rgb(47, 47, 47);
border-style: dashed;
border-width: 1.5px;
} <span class="switch" @click="onSwitchClick(key)"></span>This particular snippet is not functioning correctly here.
Does anyone have a solution? Also, any recommendations on how to enhance my implementation? Typically, I would define a class and add myClass:hover and active as well, but due to the use of Vue.js and some unique set up, I had to resort to workarounds (still learning in vue). Appreciate any help in advance!