时间戳

首页 > 解决方案 > 在悬停 CSS 上选择第一个子 img 标签

html - 在悬停 CSS 上选择第一个子 img 标签

问题描述

我的目标是让图像仅用名称和标题填充列。然后在悬停时，图像淡出，带有有关人员信息的新文本淡入标题所在的位置。. 悬停时列的大小应该像它们一样增加。

代码笔： https ://codepen.io/motionair/pen/ExgRROy

我会对 javascript 选项感兴趣，但我还没有 JS/CSS 方面的经验。

到目前为止，这是我的代码，非常感谢任何提示：

* {
  margin: 0;
  padding: 0;
}

body,
html,
.columnContainer {
  height: 80%;
}

.columnContainer {
  display: table;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.columnContainer>section {
  width: 15%;
  display: table-cell;
  -webkit-transition: width 0.5s linear;
  transition: width 0.5s linear;
}

.columnContainer:hover>section:hover {
  width: 30%;
}

.columnContainer:hover>section:hover>img:first-child {
  opacity: 0.5;
}

.columnContainer:hover>section {
  width: 15%;
}
<div style="height:400px;">
  <div class="row columnContainer">
    <section id="1" class="col ">
      <div class="white">
        <div class="img d-flex justify-content-center">
          <img src="...." style="width: 70%;">
        </div>
        <div style="background-color: white;"> <span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus, mauris id tincidunt interdum, erat nisl eleifend lectus, quis pulvinar sem nunc non felis. Nam elit ligula, euismod a semper ut, convallis nec urna. Ut feugiat arcu quis justo efficitur, eu aliquet ipsum tempus. Fusce non ante eget quam malesuada hendrerit. Vivamus diam nulla, mollis id tincidunt ut, fermentum id ex.
              </span>
        </div>
      </div>
    </section>
    <section class="col">
      One of three columns
    </section>
    <section class="col">
      One of three columns
    </section>
    <section class="col">
      One of three columns
    </section>
    <section class="col">
      One of three columns
    </section>
  </div>
</div>

标签： htmlcss

解决方案

这是你要找的吗？

<!DOCTYPE html>

<html>
<head>
    <style>
      #custom-grad {
        background-image: linear-gradient(to bottom right, #81bde0, #e1edf4);
      }
      
      .white {
        background-color: white;
        height: 100%;
      }
      
      * {
        margin: 0;
        padding: 0;
      }
      
      body,
      html,
      .columnContainer {
        height: 80%;
      }
      
      .columnContainer {
        display: table;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
      }
      
      .columnContainer > section {
        width: 15%;
        display: table-cell;
        -webkit-transition: width 0.5s linear;
        transition: width 0.5s linear;
      }
      
      .columnContainer:hover > section:hover {
        width: 30%;
      }
      
      .columnContainer:hover > section:hover > img:first-child {
        opacity: 0.5;
      }
      
      .columnContainer:hover > section {
        width: 15%;
      }
      
      .columnContainer > section:nth-of-type(1) {
        background-color: rgba(200, 200, 250, 0.5);
      }
      
      .columnContainer > section:nth-of-type(2) {
        background-color: rgba(200, 250, 200, 0.5);
      }
      
      .columnContainer > section:nth-of-type(3) {
        background-color: rgba(250, 200, 200, 0.5);
      }
      
      .columnContainer > section:nth-of-type(4) {
        background-color: rgba(200, 225, 225, 0.5);
      }
      
      .columnContainer > section:nth-of-type(5) {
        background-color: rgba(225, 200, 225, 0.5);
      }
    </style>
</head>
<body id="custom-grad">

  <div style="height:400px;">
    <div class="row columnContainer">
      <section id="1" class="col ">
        <div class="white" onmouseover="mouseover();" onmouseout="mouseout();">
          <div class="img d-flex justify-content-center">
            <img id="img" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fuwosh.edu%2Fstudenthealth%2Fwp-content%2Fuploads%2Fsites%2F26%2F2016%2F08%2Fanonymous-headshot.jpg&f=1&nofb=1" style="width: 100%; height:100%; ">
            <p>Name</p>
            <p>Title</p>
          </div>
          <div id="text" style="background-color: white; display:none"> <span>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus, mauris id tincidunt interdum, erat nisl eleifend lectus, quis pulvinar sem nunc non felis. Nam elit ligula, euismod a semper ut, convallis nec urna. Ut feugiat arcu quis justo efficitur, eu aliquet ipsum tempus. Fusce non ante eget quam malesuada hendrerit. Vivamus diam nulla, mollis id tincidunt ut, fermentum id ex.
            </span>
          </div>
        </div>
      </section>
      <section class="col">
        One of three columns
      </section>
      <section class="col">
        One of three columns
      </section>
      <section class="col">
        One of three columns
      </section>
      <section class="col">
        One of three columns
      </section>
    </div>
  </div>

  <script src="app.js"></script>
  <script>
    function mouseover() {
      var img = document.getElementById("img");
      img.style.display="none";
      var text=document.getElementById("text");
      text.style.display="block";
    }
    function mouseout() {
      var img = document.getElementById("img");
      img.style.display="block";
      var text=document.getElementById("text");
      text.style.display="none";
    }
  </script>
</body>

</html>

推荐阅读