Question

我已经尝试过多种不同的解决方案，但我发现这些解决方案到目前为止还没有。我想要做的是当您将鼠标悬停在图像上时，动态文本会覆盖图像。我也想改变悬停颜色。目前，文本始终位于角落，而不是仅在悬停时显示（居中更好），悬停不透明度有效，但我似乎无法更改颜色。

这是我的代码：

<div class="container" ng-init="getCompanies()">

<!-- Repeater herev-->
<div class="col-lg-6">
    <div class="row vertical-align" ng-repeat="company in companies">
        <!-- Company Logos -->
        <div class="co-logo">
            <img src="{{company.Image}}" class="img" alt="{{company.Company}} {{company.Booth}}" />
            <!-- Hover Text -->
            <div class="textoverlay">
                {{company.Company}} {{company.Booth}}
            </div>
        </div>
    </div>
</div>

我相应的CSS：

/* Company Logo Options */
.co-logo {
  padding: 5px;
  width: 300px;
  vertical-align: middle;
  margin-top: 20px;
  box-shadow: 0px 0px 0px 1px #000000;
}

.co-logo:hover {
   opacity: 0.3;
   width: 300px;
}

.textoverlay {
   width:300px; 
   background:white; 
   opacity:0.5;
}

任何想法都会很棒。感谢

Answer 1

您应该查看>子组合选择器，按照以下方式实现：

/* Company Logo Options */
.co-logo {
  position: relative; /*so the position of textoverlay will be relative to this div */
  padding: 5px;
  width: 300px;
  vertical-align: middle;
  margin-top: 20px;
  box-shadow: 0px 0px 0px 1px #000000;
}

.co-logo:hover {
  /* opacity: 0.3; */
  width: 300px;
}

.textoverlay {
  position: absolute; /* takes it out of the flow */
  top: 0;
  left: 0;
  width:100%;
  height: 100%; /* top left, full height / width */
  display: none; /* default state = hidden */

  background:white; 
  /* opacity:0.5; */
}

/* this is where the magic happens */
.co-logo:hover > .textoverlay
{
  display: block; /* show the child .textoverlay of the hovered .co-logo

}

JS Bin

上的工作示例

图像悬停上的文本叠加

1 个答案: