html - 如何让每个元素完全独立于CSS？

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 .