5

我想使用 CSS 为我的图像添加圆角，并更改鼠标悬停时的不透明度，因为这很可爱。有一个错误：鼠标悬停后，图像消失。

CSS 非常简单：

.article img {
  margin-bottom: 5px;
  -moz-border-radius: 15px;  /* for Firefox */
  -webkit-border-radius: 15px; /* for Webkit-Browsers */
  border-radius: 15px; /* regular */
}

.article:hover .img {
  opacity: 0.8;
}

html 也只是为了测试（这是我用谷歌搜索的第一张图片）：

<li class="article">
    <div class="img">
        <a href="#">
            <img src="http://i.telegraph.co.uk/multimedia/archive/02371/karen-ann-jones_2371086k.jpg" alt="Url">
        </a>
    </div>
</li>

你可以在 jsfiddle 上看到它：http: //jsfiddle.net/9DjLT/3/

浏览器：ff19

4

3 回答 3

4

我最近在尝试在我的网站上实现块级链接时遇到了这个问题，我通过在未悬停的 img 声明中添加以下规则来解决它：

border: 0.001em solid transparent;

可以肯定的是，这是一个 hack，但它似乎有效。

于 2013-05-03T14:58:51.593 回答
0

我认为您在 css 中有问题，因为 li:hover 它占用了 100% 的宽度。所以直到你的鼠标光标在你的图像效果上不透明度。只需尝试以下 CSS 更改

.img a:hover{
  opacity: 0.8;
 }
于 2013-03-28T05:40:38.390 回答
0

FWIW, I hit a similar problem in Chrome 38. In my case, I had a div with a border-radius value, and an image element with a transparency value, and the transparent image was hidden. To fix this, I added a non-1 opacity to the parent element (with the border-radius). Something like this:

.round_box {
  border-radius: 5px;
  opacity: 0.999999;
}

.transparent {
  opacity: 0.6;
}

<div class="round_box">
  <div class="transparent">
</div>

... Adding opacity: 0.999999; to the parent element made the transparent element display properly. I should note that I also have a lot of other interesting styles going on - drop shadows, column layout - but, maybe a similar hack will work for others.

于 2014-11-09T21:46:27.580 回答