如何更改图像上的鼠标悬停

Question

I'm trying to code a website and every time I edit the images there's a mouseover effect and I want to have a plain image on the webpage. The image is grayed out and when I mouseover it's not. How can I make it stay normal without having to mouseover? When I click, it opens a link and just opens the same page. SOS. <img src="images/image.jpg" alt="image" class="border2" />

Answer 1

If you have CSS stylesheets they may be causing the difference, use inspect element on it and see what styles are active and click on the :hov then the :hover button next to the filter bar in the styles tab to see how it changes. Then look at the style side with hover activated and see where, if any, there are places with :hover in their selector. Next find the place in your stylesheet where that selector is and copy its contents into the selector without :hover

Example

<button class="btn">Press Me</button>

which would then be styled by both:

.btn {
    background-color: white;
}

.btn:hover {
    background-color: blue;
}

this would mean that when not hovered the button is white but then becomes blue when you hover over it. A similar thing may be happening to your image with something along the lines of:

.border2 {
    background:#ffffff;
    opacity: 0.5;
}

.border2:hover {
    opacity: 1;
}

found this on Grey out all images other than active hover image