Maison  >  Questions et réponses  >  le corps du texte

Image de survol HTML : étendre la zone cliquable au-delà de l'image

Je suis relativement nouveau dans le CSS/html. Je parcours ce problème depuis un moment mais je n'ai pas trouvé de solution.

La question est la suivante : si j'utilise le code ci-dessous (en utilisant Bulma), que se passe-t-il en cas de img3.jpg悬停时,可点击区域是从第一个

开始的整个块。我怀疑问题可能是Bulma的is-column / is-multilineconflits entre et les définitions CSS remplacées que je fournis ?

<style type="text/css">
  ul {
    list-style: none;
    padding: 10px 10px 10px 30px
  }
  ul li {
    font-size: 120%;
    margin-left: 10px;
    list-style-type: circle;
  }
</style>

<style>
.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
</style>

<div class="columns is-multiline">
  <div class="column is-9">
    <div class="content">
      <h3> 关于我们 </h3>
      <hr>
      <p align="left" style="font-size:120%;">
        一些内容...
      </p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-4">
          <img src="/images/img1.jpg" alt="" class="image"/>
      </div>
      <div class="column is-4">
          <img src="/images/img2.jpg" alt="" class="image"/>
      </div>
      <div class="column is-4">
        <div class="container">
          <img src="/images/img3.jpg" alt="" class="image"/>
          <div class="overlay">
            <div class="text">你好,世界</div>
          </div>
        </div>
      </div>
    </div>

    <p align="left" style="font-size:120%;">
      一些文本...

      <ul>
        <li>
          项目1
          <a href="url1">
             <b>链接</b>
          </a>
        </li>
        <li>
          项目2
          <a href="url2">
             <b>链接</b></a>
        </li>
      </ul>
    </p>

  </div>

  <div class="column is-3">
    {% include latest-posts.html %}
  </div>
</div>
<hr>
P粉459440991P粉459440991427 Il y a quelques jours674

répondre à tous(1)je répondrai

  • P粉738346380

    P粉7383463802023-09-11 00:10:53

    Essayez ce document

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
      <title>Document</title>
      <style>
        body {
          padding-top: 2em;
        }
        
        ul {
          list-style: none;
          padding: 10px 10px 10px 30px
        }
        
        ul li {
          font-size: 120%;
          margin-left: 10px;
          list-style-type: circle;
        }
        
        .container {
          position: relative;
          width: 100%;
        }
        
        .columns {
          display: flex;
        }
        
        .image {
          display: block;
          width: 100%;
          max-width: 320px;
          height: auto;
        }
        
        .overlay {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          height: 100%;
          width: 100%;
          opacity: 0;
          transition: .5s ease;
          background-color: #008CBA;
        }
        
        .container:hover .overlay {
          opacity: 1;
        }
        
        .text {
          color: white;
          font-size: 20px;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          text-align: center;
        }
        
        .test {
          position: absolute;
          left: 0;
          border-bottom: green solid;
          font-size: .5em;
          font-weight: bold;
        }
        
        .test-top {
          top: 0;
        }
        
        .test-bottom {
          bottom: 0;
        }
      </style>
    </head>
    
    <body>
    
      <div class="columns is-multiline">
        <div class="column is-9">
          <div class="content">
            <h3> 关于我们 </h3>
            <hr>
            <p style="font-size:120%; text-align:left">
              一些内容...
            </p>
          </div>
          <div class="columns is-multiline">
            <p class="test test-top">开始 columns / is-multiline</p>
            <div class="column is-4">
              <img src="https://w7.pngwing.com/pngs/715/287/png-transparent-number-1-number-1-creative-cartoon-thumbnail.png" alt="" class="image" />
            </div>
            <div class="column is-4">
              <img src="https://w7.pngwing.com/pngs/664/223/png-transparent-number-2-number-number-2-image-file-formats-text-heart-thumbnail.png" alt="" class="image" />
            </div>
            <div class="column is-4">
              <div class="container">
                <img src="https://w7.pngwing.com/pngs/111/727/png-transparent-number-3-illustration-number-blue-crystal-number-three-teal-number-symbol-thumbnail.png" alt="" class="image" />
                <div class="overlay">
                  <p class="test test-top">开始覆盖</p>
                  <div class="text">你好世界</div>
                  <p class="test test-bottom">结束覆盖</p>
                </div>
              </div>
            </div>
            <p class="test test-bottom">结束 columns / is-multiline</p>
          </div>
    
          <p style="font-size:120%; text-align:left">
            一些文本...
    
            <ul>
              <li>
                项目1
                <a href="url1">
                  <b>链接</b>
                </a>
              </li>
              <li>
                项目2
                <a href="url2">
                  <b>链接</b></a>
              </li>
            </ul>
          </p>
    
        </div>
    
        <div class="column is-3">
          {% include latest-posts.html %}
        </div>
      </div>
      <hr>
    
    </body>
    
    </html>

    répondre
    0
  • Annulerrépondre