悬停div

Question

我在这个问题上找到了几个变种，但我很难过。当我将鼠标悬停在我的div上时，我正试图在我的范围内创建更改。

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

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

我能想到的是，我在通过SnappySnippet抓取的代码中无意中覆盖了一些东西。我是新手，所以请原谅我的无知！

我在这里使用了我正在使用的css和html，但它没有正确显示：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上，这样无论您将鼠标悬停在何处（不仅仅是悬停标题），都会发生更改。您还在错误的窗格中放置了CSS。

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

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

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

Updated Fiddle

Answer 2

关于你的小提琴：你把CSS代码放到小提琴的Javascript字段中，这就是为什么它不起作用。

我更改了它，将color: black添加到悬停规则并修改了悬停规则的选择器：

https://jsfiddle.net/ah49w525/2/