html - 悬停 div 时更改跨度字体颜色和背景封面

Question

我发现了这个问题的几个变体，但我很困惑。当我将鼠标悬停在我的 div 上时，我试图在我的跨度中创建更改。

我试图让黑色背景变成白色，当我将鼠标悬停在 div 上时字体变成黑色。我认为，这些变化反射(reflect)在跨度上。

但到目前为止我有这个:http://nybg.beta.libguides.com/c.php?g=566117

我能想到的是，我无意中覆盖了通过 SnappySnippet 获取的代码中的某些内容。我是新手，请原谅我的无知!

我在这里使用我正在使用的 css 和 html 做了一个 fiddle ，但它没有正确显示:https://jsfiddle.net/emj042/ke6fL5mz/

.departments img:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  /* For IE8 and earlier */
}
#DIV_1 {
  bottom: 0px;
  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 10px 2px;
  box-sizing: border-box;
  display: inline-block;
  left: 0px;
  position: relative;
  right: 0px;
  text-size-adjust: 100%;
  top: 0px;
  vertical-align: top;
  perspective-origin: 143.297px 81px;
  transform-origin: 143.297px 81px;
  background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box;
  border: 1px solid rgb(0, 0, 0);
  font: normal normal normal normal 16px / 16px"Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0px -4px 24px 28.3125px;
}
/*#DIV_1*/

#SPAN_1 {
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  height: 40px;
  left: 0px;
  letter-spacing: 2px;
  opacity: 0.9;
  position: absolute;
  right: 0px;
  text-size-adjust: 100%;
  z-index: 0;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 142.297px 16.5px;
  transform-origin: 142.297px 16.5px;
  background: rgb(0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-right: 0px none rgb(255, 255, 255);
  border-bottom: 0px none rgb(255, 255, 255);
  border-left: 0px none rgb(255, 255, 255);
  font: normal normal bold normal 12px / normal Arial, Helvetica, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
  padding: 6px 6px;
}
/*#SPAN_1*/

#SPAN_1:after {
  color: rgb(255, 255, 255);
  content: '▶';
  display: block;
  float: right;
  height: 20px;
  letter-spacing: 2px;
  text-size-adjust: 100%;
  width: 11px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 5.5px 10px;
  transform-origin: 5.5px 10px;
  border: 0px none rgb(255, 255, 255);
  font: normal normal bold normal 15px / normal Arial, Helvetica, sans-serif;
  outline: rgb(255, 255, 255) none 0px;
}
/*#SPAN_1:after*/

#SPAN_1:hover {
  background: white;
}

<div class="departments">
  <div class="col-xs-6 col-sm-3">
    <div id="DIV_1">
      <a href="http://adulted.nybg.org:8080/cart65/jsp/index.jsp?categoryId=10093">
        <img alt="" src="http://www.nybg.org/adulted/icon/BOTANICAL-ART-Longleaf-Pine_289x162.jpg" /> <span id="SPAN_1">Botanical Art &amp; Illustration</span>
      </a>
    </div>
  </div>
</div>

预先感谢您的帮助。

Answer 1

您可能希望悬停 CSS 规则位于包含元素 #DIV1 上，这样无论悬停在何处(不仅仅是悬停标题时)都会发生更改。您还在 fiddle 的错误 Pane 中放置了 CSS。

#DIV_1:hover #SPAN_1 {
  background: white;
  color: black;
}

要解决悬停 span 时的图像 opacity 问题，只需将 opacity 规则更改为以下内容:

#DIV_1:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

Updated Fiddle