我的页面上有一张图片用作链接。我试图获得一种效果,当鼠标悬停在图像上时,它会变得更暗(透明暗)并且图像上方会出现文字“查看”。我正在使用 Bootstrap,所以它需要响应。
我尝试在 CSS 中执行 categorieimg:a hover
但它似乎没有响应。如果可以用 jQuery 完成,欢迎所有建议。
我的 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
最佳答案
为了能够实现您想要的效果,您应该使用 PNG 图像而不是 JPEF。 因为 JPEG 图像将占据元素的全部空间,您无法在任何地方显示背景色。
查看此工作演示。
img {
width: 200px;
height: 200px;
background-color: red;
}
img:hover {
background-color: gray;
}
<img src="https://cdn4.iconfinder.com/data/icons/commerce-5/100/.svg-6-128.png" alt="">
关于jquery - 将鼠标悬停在图像上作为链接的想法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45682892/