Question

几乎在页面底部，您会看到4张图像，每张图像中都有一个按钮。（维罗纳，单丝绸，纤维丝和Akvarell）。

我试图获得一个图像，其中有一个居中（包括真实和水平）文本。这一切都需要做出回应。

我需要用这些按钮修复的最重要的事情是，当你将鼠标悬停在一个按钮上时，我希望图像变得更暗（就像现在一样）但是我希望它保持这种状态即使你把鼠标放在里面的文字上。我不明白我需要采用哪种方法来实现这一目标。

按钮的html代码是：

＆＃13;

.product-container {
    position:relative;
    background-color: #000000;
    }

    .product-btn {
    position: absolute;
    top:39%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: rgba(0,0,0, 0.3);
    width: 50%;
    border: 1px solid #e1e1e1;
    color: #ffffff;
    padding: 5px 0;
    }

    .product-img {
    width:100%;
    height: auto;
    opacity: 1; 
	transition:
    opacity 0.1s ease-in-out;
    -moz-transition: opacity 0.1s ease-in-out;
    -webkit-transition: opacity 0.1s ease-in-out;
    }

    .product-img:hover {opacity: 0.5;}

＆＃13;

    <div class="product-container">
    <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
    <a href="http://google.se">
        <p class="product-btn">Mono Silk</p>
    </a>
    </div>

＆＃13;

我怎样才能做到这一点？

Answer 1

为了在悬停图像和文本时使图像更暗，我更改了此CSS规则

.product-img:hover {opacity: 0.5;}

到这个

.product-container:hover img {opacity: 0.5;}

您还删除了一个额外的结束</div>标记。

~~内联（p）中的阻止级别（a）元素无效，因此我将您的p更改为span并添加了{{ 1}}到它的CSS规则，所以里面的文本居中。~~

在内联元素中使用块级元素（如text-align: center;）通常无效，但根据新的HTML5 specs，p现在可以包含块级元素（谢谢只要内部没有交互式内容（例如按钮或其他链接），就可以指向@tjameswhite。

示例代码段

＆＃13;

.product-container {
  position:relative;
  background-color: #000000;
}

.product-btn {
  position: absolute;
  top:39%;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: rgba(0,0,0, 0.3);
  width: 50%;
  border: 1px solid #e1e1e1;
  color: #ffffff;
  padding: 5px 0;
  text-align: center;
}

.product-img {
  width:100%;
  height: auto;
  opacity: 1; 
  transition:
    opacity 0.1s ease-in-out;
  -moz-transition: opacity 0.1s ease-in-out;
  -webkit-transition: opacity 0.1s ease-in-out;
}

.product-container:hover img {opacity: 0.5;}

＆＃13;

Answer 2

更改标记，使图像位于链接之后。

然后css将获得位于父级中心的链接：

.product-container {
      position:relative;
      background-color: #000000;
    }
    
    .product-btn {
      position: absolute;
      top:50%;
      left: 50%;
      background-color: rgba(0,0,0, 0.3);
      width: 50%;
      border: 1px solid #e1e1e1;
      color: #ffffff;
      padding: 5px 0;
      transform: translate(-50%, -50%);
    }
    
    .product-img {
      width:100%;
      height: auto;
      opacity: 1; 
      transition:
      opacity 0.1s ease-in-out;
      -moz-transition: opacity 0.1s ease-in-out;
      -webkit-transition: opacity 0.1s ease-in-out;
    }
    
    .product-container > a:hover + img {opacity: 0.5;}

    <div class="product-container">
      <a href="http://google.se">
        <p class="product-btn">Mono Silk</p>
      </a>
      <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"></div>
    </div>

Answer 3

在CSS中（减缓产品容器中的样式更改并为其执行悬停操作）：

.product-container {position:relative; background-color: #000000;
    transition: opacity 0.1s ease-in-out;
   -moz-transition: opacity 0.1s ease-in-out;
   -webkit-transition: opacity 0.1s ease-in-out;
}
/*.product-img:hover {opacity: 0.5;}*/
.product-container:hover img {opacity: 0.5;}

在HTML中（在.product-container div中放置链接）：

<div class="product-container"><img class="product-img" src="./Material _ ProFormat AB_files/monosilk.jpg"/><a href="http://google.se/"><p class="product-btn">Mono Silk</p></a></div>

Answer 4

调整标记，使图像和文本位于链接内：

<div class="col-sm-3 text-center">
    <a href="http://google.se" class="product-container">
        <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg" alt="">
       <div class="product-btn">Mono Silk</div>
   </a>
</div>

这会删除一个额外的容器（将产品容器类移动到链接）。然后将样式更新为：

.product-container {
    position:relative;
    background-color: #000000;
    display: block;
    height: 426px;
    width: 426px;
 }

 .product-img {
     width: 426px;
     height: 426px;
 }
 .product-btn {
     position: absolute;
     top: 39%;
     left: 0;
     right: 0;
     margin: 0 auto;
     background-color: rgba(0,0,0, 0.3);
     width: 50%;
     border: 1px solid #e1e1e1;
     color: #ffffff;
     padding: 5px 0;
     text-align: center;   
 }

 .product-container:hover .product-img {opacity: 0.5;}
 .product-container:hover .product-btn {background: rgba(0,0,0,1)}

请注意，链接（.product-container）具有display: block;和设置的宽度和高度，图像也是如此。根据需要调整。

这样做的好处是整个盒子现在是一个可点击的大按钮。

Answer 5

一个很酷的技巧是使用伪元素垂直对齐内联块。这允许多行文本也正确对齐。

我道歉，因为我现在正在工作，所以我希望这个小提琴有所帮助。如果需要，将在稍后的更新中详细介绍：

https://jsfiddle.net/pj5p0s3s/

＆＃13;

/*Disgusting stuff for demo :) */
.product-container {
  float:left;
  margin-right:5px;
  max-width:200px;
 }
 /* */

.product-container {
  position:relative;
  background-color: #000000;
}
.product-container a {
   display:block;
}
.product-container a:after {
  content:"";
  background: rgba(0,0,0, 0.3);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.product-container a:hover:after {
  background: rgba(0,0,0,0.6);
  transition: 0.3s;
}

.product-container-overlay {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  text-align:center;
  z-index:1;
}
.product-container-overlay:before {
  content:"";
  height:100%;
  display:inline-block;
  width:1px;
  vertical-align:middle;
}

.product-btn {
  background-color: rgba(0,0,0, 0.3);
  width: 50%;
  border: 1px solid #e1e1e1;
  color: #ffffff;
  padding: 5px 0;
  display:inline-block;
  vertical-align:middle;
}

.product-img {
  width:100%;
  height: auto;
  display:block;
}

.product-img:hover {
  opacity: 0.5;
}

＆＃13;

<div class="product-container">
  <a href="http://google.se">
    <div class="product-container-overlay">
      <p class="product-btn">Mono Silk</p>
    </div> 
    <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
  </a>
</div>

<div class="product-container">
  <a href="http://google.se">
    <div class="product-container-overlay">
      <p class="product-btn">Mono Silk long title lipsum</p>
    </div> 
    <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
  </a>
</div>

<div class="product-container">
  <a href="http://google.se">
    <div class="product-container-overlay">
      <p class="product-btn">Mono Silk</p>
    </div> 
    <img class="product-img" src="http://dev2015.proformat.se/wp-content/uploads/2016/02/monosilk.jpg"/>
  </a>
</div>

＆＃13;

覆盖

5 个答案: