【问题标题】:How do I have images resize and retain the ability to have them change on hover如何调整图像大小并保留在悬停时更改它们的能力
【发布时间】:2017-04-13 16:42:22
【问题描述】:

我有这个问题..我希望能够使用

.custom-forums {
    height: auto;
    width: 100%;
    border-image-source:transparent url("../images/forums.png") center top no-
    repeat;
}

.custom-forums:hover {
   background-image: url('../images/forums-hover.png');
}

问题是这样的:当width 设置为100% 时,它根本不显示图像。但是当widthheight 设置为170px 时,它确实有效。我希望根据屏幕分辨率调整按钮大小并保留更改悬停图像的能力。

非常感谢, 马斯21

【问题讨论】:

  • 你有更多可以展示的代码吗?它可能不起作用的原因有很多。如果您可以创建一个重现您问题的 jsfiddle,那就更好了。
  • 我们需要查看您的 HTML,但在第一种情况下,您的元素高度是否为 0?
  • 元素的高度不为零。 @托克维尔
  • 是的@JamieClark .. 在sskyblock.com查看现场直播

标签: javascript jquery html css image


【解决方案1】:

背景图片需要在其容器中预定义高度或特定高度的内容才能工作。

我想你可以用另一种方式做到这一点:

  • 使用背景图片
  • 在该 div 中放置另一个图像,悬停时将其设置为不透明度 0,或者您的偏好和 bg 图像显示

运行这个例子:

.container {
background: url('http://placehold.it/199x199') no-repeat center center;
width: 200px;
}

img {
transition: opacity ease-in-out .5s;
}

img:hover {
opacity: .25;
}
<div class="container">
<img src="http://placehold.it/200x200">
</div>

【讨论】:

  • 嗨@MasonHerbel 试试看,让我知道。
猜你喜欢
  • 1970-01-01
  • 2020-11-10
  • 2013-08-20
  • 2015-11-14
  • 2013-01-04
  • 2013-09-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多