jquery - 将鼠标悬停在图像上作为链接的问题

Question

我试图达到这样的效果，一旦你将鼠标悬停在图像上它就会改变颜色，一旦你点击它，它就会将你重定向到请求的页面，所以我也将它用作 href。我试着做 css img:hover 但它没有用。我的图像是 png 。我正在使用 bootstrap 让网站响应。

我的 HTML:

    @extends ('master') 

    @section('content') 
    <div class="row"> 
        <div class="col-md-12">
            <h1 class="text-center">Myhero Shop</h1> <br><br>
        </div> 
    </div>  
    <div class="row"> 

        @if ($categories)
        @foreach($categories as $category) 
        <div class="col-md-4 col-sm-6 text-center"> 
            <h3 >{{ $category['title'] }} </h3>   
            <p class><a href="{{ url('shop/'. $category['url']) }}" class="categorieimg"><img width="250" src="{{ asset('images/' . $category['image']) }}"></a></p>  
            <p>{!! $category['article']!!}</p>  

        </div> 
        @endforeach 
        @else 
        <div class="col-md-12"> <br><br>
            <p class="text-center" style="font-size: 18px"><b>No categories found...</b></p>
            <div 
                @endif
        </div>
        @endsection   

My css: 

.categorieimg:hover{
    background-color: #080808;
}

Answer 1

img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

img:hover {
    -webkit-filter: none;
    filter: none;
}

<a href="https://www.w3schools.com/cssref/css3_pr_filter.asp">
  <img src="https://www.w3schools.com/cssref/pineapple.jpg" />
</a>