Question

这是我的问题：

我有'a'标签包含的圆形图像（使用bootstrap的img-circle类）。当用户悬停时，'img'不透明度降低，有效地使图像变暗，并显示文本。

问题是，即使我没有针对它，文本的不透明度也会受到影响。文本在div之外，包含'a'和amp; 'img'标签，我认为这可以防止它受到影响。

HTML

<div class="contactpeople">
<div class="container">

<h3>OR CONTACT US DIRECTLY</h3>

<div class="row">
  <div class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg"/>
        </a>
        <div class="contactinfo">
          <div>津坂晋一</div>
          <div>Account Manager</div>
          <div><a href="mailto:mail@mail.com">mail@mail.com</a></div>
        </div>

      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg"></a>
        <div class="contactinfo">
          <div>福井麻里子</div>
          <div>Mynewsdesk Japan<br>Country Manager</div>
          <div><a href="mailto:mail@mail.com">mail@mail.com</a></div>
        </div>
      </div>
    </div>
  </div>
  <div style="padding-left: 70px; padding-right: 70px;" class="col-sm-4">
    <div class="employees">
      <div class="portrait">
        <a class="img-circle darken"><img class="img-circle" src="http://45.79.67.59/images/employee_max.jpg">
        </a>
      <div class="contactinfo">
        <div>マックス・レーム</div>
        <div>Account Manager</div>
        <div><a href="mailto:mail@mail.com">mail@mail.com</a>               </div>
      </div>
    </div>
  </div>
</div>

CSS

.employees img{
height: 100%;
width: 250px;
}
a.darken{
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;

-webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
}
a.darken:hover img {
opacity: 0.5;
}
a.darken:hover + .contactinfo{
display: block;
}
.cta.btn{
margin-top: 4px;
margin-bottom: 4px;
}
.contactpeople{
text-align: center;
}
.contactinfo{
margin-top: -170px;
margin-bottom: 170px;
display: none;
}

Answer 1

想出了这个：JSFiddle

.contactinfo{
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 border-radius: 50%;
 background-color: rgba(0,0,0,0.5);
 padding-top: 38%;
 opacity: 0;
 -webkit-transition: all 0.3s ease;
       -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
         -o-transition: all 0.3s ease;
            transition: all 0.3s ease;
}

我使用opacity而不是使用background-color: rgba()，这将为整个容器提供不透明度，而不是内部的文本。看看吧！

Answer 2

不太容易解决。使contactinfo位置相对移除透明度，但会使其闪烁，因为它仍然受到过渡的影响（不知道为什么），因此我使用指针事件无阻止任何悬停效果。这是我的解决方法，给你的小提琴：

CSS：

.contactinfo {
  margin-top: -170px;
  margin-bottom: 170px;
  display: none;
  position: relative;
  pointer-events: none;
}
.portrait {
  cursor: pointer;
}

但是现在电子邮件链接不起作用，所以我添加了链接到肖像容器：

HTML：

<div class="portrait" onclick="location.href='mailto:mail@mail.com'">
...
</div>

变暗图像背景悬停w / o影响文本

这是我的问题：

HTML

CSS

2 个答案: