Question

我有两张带有文字的图片。当我转到一个图像时，该图像的文本应该消失。

我写的代码很好，工作得很好。

<div class="sidebarimagesupermsg"><img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
<h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
<div>
<div class="sidebarimage">
<a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
<h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
</a>
<div>

的CSS：

.sidebarimage, .sidebarimagesupermsg { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

.h3sidebarimage, .h3sidebarimagesupermsg { 
   position: absolute; 
   top: 20px; 
   left: 0; 
   width: 100%; 
}
.h3sidebarimage span, .h3sidebarimagesupermsg span { 
   color: white; 
   font: bold 22px/45px Helvetica, Sans-Serif; 
   letter-spacing: 2px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.5);
   padding: 10px; 
}
.h3sidebarimage span.spacer, .h3sidebarimagesupermsg span.spacer {
   padding:0 5px;
}
.sidebarimage:hover .h3sidebarimage, .sidebarimagesupermsg:hover .h3sidebarimagesupermsg  {
      visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

请在此处查看演示： http://jsfiddle.net/pikk/7dmzd7yc/

然而它适用于1张图片。但是，如果我将2个图像悬停，则还会消除1个图像中的文本。那是错的。

由于我在侧边栏中会有很多类似的图像，因此我不想为每个图像复制CSS代码。所以我想知道是否有一个解决方案允许我只保留一份css代码。

我想保留尽可能少的CSS代码。

由于

Answer 1

问题是您没有关闭包装<div>标签。这应该有效：

<div class="sidebarimagesupermsg">
  <img src="https://homepages.cae.wisc.edu/~ece533/images/arctichare.png" syle="width:100%;" alt="super massage" />
  <h3 class="h3sidebarimagesupermsg"><span>super<span class='spacer'></span><br /><span class='spacer'></span>Massage</span></h3>
</div>
<div class="sidebarimage">
    <a href="http://www.google.com" title="Workshop for couples"><img src="https://homepages.cae.wisc.edu/~ece533/images/barbara.png" syle="width:100%;" alt="Workshop for couples">
      <h3 class="h3sidebarimage"><span>Workshop<span class='spacer'></span><br /><span class='spacer'></span>For couples</span></h3>
    </a>
</div>

以下是更新的jsFiddle。

Answer 2

除了@ JCOC611上面的回答（关于关闭<div>标签），您还可以通过使用元素标签而不是每个项目的自定义类来大大简化CSS。

在你的问题中你提到：

我不想复制每张图片的CSS代码。

目前看，您的标记需要为您添加的每个图片/ h3添加一个选择器。如果你推广选择器，你可以在不触及CSS的情况下添加（理论上）无限量。

有关更简单的CSS，请参阅此updated JS Fiddle。

如何使每个元素与CSS完全独立？

2 个答案: