Question

有人可以帮我解决我的css + html问题吗？请参阅我添加的代码段。

我需要做什么， 1.带有保持固定图像的方框（.box） 2.隐藏的描述（.hidden）在没有移动时悬停在下面的图像框上

有人可以帮我解决这个问题吗？

.box {
  width: 170px;
  transition: all .4s ease;
  border-bottom: 10px solid #fff;
  color:#000 !important;
}

#caption {
  width: 160px;
  font-size:15px;
  text-decoration:none;
  margin: 0 0 0px 5px;
}

.boximg{
   width: auto;
   max-width: 100%;
   margin-bottom: 8px;
}

.box:hover {
  width: auto;
  max-width: 170px;
  border-bottom: 10px solid #000;
  transition: all .4s ease;
  color:#ccdc29 !important;
  background-color:#000;
}

.box:hover > #hidden  {
  display:block;
  transition: all .3s ease;
  overflow-x: hidden;
}

#hidden  {
  display:none;
  color:#fff;
  margin:5px;
  transition: all .3s ease;
}

.image_off, #home:hover .image_on{
  display:none;
  transition: all .4s ease;
}
.image_on, #home:hover .image_off{
  display:block;
  transition: all .4s ease;
}

<div class="box">
  <a href="#">
    <a href="#"  class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" /></a>
 <br>
 </a>
 <p id="caption">Lorem Ipsum</p>
 <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>

<div class="box">
  <a href="#">
    <a href="#"  class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ" /></a>
  <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>

谢谢堆！

Answer 1

尝试以下方法。我修复了你的嵌套锚点，删除了一些重复的id并绝对定位了标题。我唯一要说的是标题有18px减去保证金 - 不确定是什么造成了需要保证金的差距

此外，如果你想要停止闪烁效果，你需要使用相同尺寸的图像 - 你的悬停一个稍微大一点

.box {
  width: 170px;
  transition: all .4s ease;
  color: #000 !important;
  position:relative;
  padding:0;
  margin-bottom:10px;
}

.box > a
.box span,
.box img {
 display:block;
}

#caption {
  width: 160px;
  font-size: 15px;
  text-decoration: none;
  margin: 0 0 0px 5px;
}

.boximg {
  width: auto;
  max-width: 100%;
}

.box:hover {
  width: auto;
  max-width: 170px;
  transition: all .4s ease;
  color: #ccdc29 !important;
  z-index:2;
}
.box:hover>#caption {
    display:none;
} 
.box:hover>#hidden {
  display: block;
  transition: all .3s ease;
  background-color: #000;
}

#hidden {
  display: none;
  color: #fff;
  transition: all .3s ease;
  position:absolute;
  left:0; 
  right:0;
  top:100%;
  padding:5px;
  margin:-18px 0 0 0;            
}

.box .image_off,
#home:hover .image_on {
  display: none;
  transition: all .4s ease;
}


.box .image_on,
#home:hover .image_off {
  display: block;
  transition: all .4s ease;
}

<div class="box">
  <a href="#">
    <span class="boximg" id="home"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
      /></span>
    <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur, 7</p>
</div>
<div class="box">
  <a href="#">


    <span class="boximg" id="home1"><img width="170px" class="image_on" src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" /><img width="170px" class="image_off" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSH5rO0Te6nVxuBwuR352PJIKb6MeV-PDBKnVm4DBpwvd-8DPAJ"
      /></span>
    <br>
  </a>
  <p id="caption">Lorem Ipsum</p>
  <p id="hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin condimentum, nisi vel cursus consectetur</p>
</div>

Answer 2

＆＃13;

.img-with-text{
    position: relative;
    width: 170px;
}
.img-with-text > div{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0);
    color: transparent;
    transition: 1s;
}
.img-with-text > div:hover{
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
}

＆＃13;

<div class="img-with-text">
    <img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
    <div><h2>Hello!</h2></div>    
</div>

<div class="img-with-text">
    <img src="http://kittenrescue.org/wp-content/uploads/2017/03/KittenRescue_KittenCareHandbook.jpg" alt="image" width="170">
    <div><h2>Hello!</h2></div>    
</div>

＆＃13;

悬停时HTML CSS溢出而不更改位置

2 个答案: