如何在html中删除悬停图像的轮廓答案

【问题标题】：How to remove outline of hover image in html如何在html中删除悬停图像的轮廓
【发布时间】：2017-04-01 00:22:37
【问题描述】：

我正在尝试删除图像的灰色轮廓。我看到那个大纲意味着错误，因为图像标签没有源属性。但是如果我添加src="image.jpg"，则悬停不起作用。

如何解决？好迷茫……

这是我的代码

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

【问题讨论】：

css 中存在拼写错误。悬停前删除空格.. #item1:hover
是否要将background-image 设置为img 标签？奇怪
并且<img> 标签必须有src 属性，最好使用<div> 标签
可能重复stackoverflow.com/questions/1073015/…
解决了！我将图像标签更改为 div 标签：D！我想放一些图片，所以我使用了 img 标签。它引起了问题：0...谢谢回复！

标签： html css web

【解决方案1】：

试试这个：

item1:hover {
    border: none !important;
    display: block;
}

【讨论】：

【解决方案2】：

我在chrome/safari display border around image 中看到了这个问题的答案。

The reason cited is <img> tag does not have proper value in src attribute.

【讨论】：

【解决方案3】：

您可以使用 CSS 的 margin 和 overflow 属性应用一个简单的技巧。

类似这样的：

/* Image Container (Parent) */
.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

/* Image (Child) */    
.item-image img {
  margin: -1px;
  background: #eee; /* To show the area covered by image */
}

看看下面的 sn-p （我已经为图像应用了背景颜色以显示图像区域）：

#item1 {
  background-image: url('cushion01.jpg');
  height: 300px;
  width: 300px;
  background-repeat: no-repeat;
  background-size: cover;
}
#item1:hover {
  background-image: url('cushion-01.jpeg');
  height: 300px;
  width: 300px;
}

.item-image {
  width: 298px;
  height: 298px;
  overflow: hidden;
}

.item-image img {
  margin: -1px;
  background: #eee;
}

<div class="secondary__item" style="width: 100%; height : 850px;">
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item1"  src="image.jpg" />
    </li>
    <li class="item-image">
      <img class="item" id="item2" />
    </li>
  </ul>
  <ul class="item-images">
    <li class="item-image">
      <img class="item" id="item3" />
    </li>
    <li class="item-image">
      <img class="item" id="item4" />
    </li>
  </ul>
</div>

希望这会有所帮助！

【讨论】：

【解决方案4】：

奇怪的是你试图将背景设置为<img> 标签。如果我是你，我会改用<div>。那么这将非常简单：

HTML：

    <div class= "secondary__item" style="width: 100%; height : 850px;">
        <ul class="item-images">
        <li class="item-image"><div class="item"  id="item1" ></div></li>
            <li class="item-image"><div class="item"  id="item2" ></div></li>
        </ul>
        <ul class="item-images">
            <li class="item-image"><div class="item"  id="item3" ></div></li>
            <li class="item-image"><div class="item"  id="item4" ></div></li>
        </ul>
    </div>

CSS：

.item {
height:300px;
width :300px;
background-repeat: no-repeat;
background-size : cover;

/*you can remove it*/
border: 1px solid;
}
.item:hover {
background-image: url('http://shushi168.com/data/out/114/36276270-image.png');
height:300px;
width :300px;
}

这是一个小提琴：https://jsfiddle.net/7kzu5qcy/2/

【讨论】：

【解决方案5】：

把它放在你的图片标签中

alt=""

【讨论】：

【解决方案6】：

您是否尝试过不使用 ID 来使用主要标识符？

喜欢...

.item-image IMG {
 border:none;
}

【讨论】：

考虑到您使用它来设置背景图像而没有前景图像，您为什么不简单地将IMG标签更改为DIVS，做同样的工作，并且没有占位符边框。