如何让每个元素完全独立于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。

Answer 2

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

在你的问题你提到：

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

就目前而言，您的标记需要为每个图像/ h3添加一个选择器。如果你概括了选择器，你可以添加一个（理论上）无限的数量而不用触摸CSS。

查看此updated JS Fiddle为更简单的CSS。