Question

我在后台有一张图片，我把这个空间划分为四个彩色部分。我如何获得一个部分来减少不透明度（这将允许背景中的图像显示），还会显示一个带有文本的彩色框，在它悬停之前没有显示<h2>？

这就是我在悬停之前的样子：

这就是目前悬停时的样子：

悬停前的目前情况：

这是我目前的代码：

<style>
        html, body {
            height: 100%;
            padding: 0; 
            margin: 0; 
            display: block;
            height: 100%;
            margin: 0 auto;
        max-width: 100%;
        background-image: url('../images/4.jpg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        }
        .container {
            max-width: 100%;
            max-height: 100%;
        }
        .homePage div { 
            width: 50%; 
            height: 50%;
            float: left; 
        }
        #tRight { 
            top: 0;
            left: 50%;
            right: 0;
            bottom: 50%;
            background: rgba(67, 70, 75, 1); 
        }
            #tRight:hover {
            background: rgba(67, 70, 75, .3);
        }

        #bLeft { 
            top: 50%;
            left: 0;
            right: 50%;
            bottom: 0;
            background: rgba(251, 201, 80, 1); 
        }
            #bLeft:hover {
            background: rgba(251, 201, 80, .3); 
        }

        #bRight { 
            top: 50%;
            left: 50%;
            right: 0;
            bottom : 0;
            background: rgba(186, 77, 25, 1);  
        }
            #bRight:hover {
            background: rgba(186, 77, 25, .3);
        }

        .logo {
            position: absolute;
            top: 30%;
            left: 44%;
            z-index: 10;
            display: block;
        }
            .logo:hover {

        }
        #tLeft { 
        top: 0;
        left: 0;
        right: 50%;
        bottom 50%;
        background: rgba(10, 95, 107, 1); 
        display: inline-block;
        position: relative;
    }
        #tLeft:hover .hover h2{
            transition: opacity .75s ease-out; 
            position: absolute;
            top: 15%;
            bottom: 15%;
            left: 0;
            right: 0;
            background-color: rgba(153,153,153,.9);
            padding: 20px;
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 800;
            font-size: 2em;
            color: white;
            opacity: 1;
        }
    </style>
</head>

<body class="homePage">

    <header>
        <a href="#"><img src="asset/images/LOGO.png" class="logo"></a>
    </header>

    <div id="tLeft" alt="1">
        <div class="hover">
            <h2><strong>Graphic Design</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h2>
        </div>
    </div>

    <div id="tRight" alt="1">
    </div>

    <div id="bLeft" alt="1">
    </div>

    <div id="bRight" alt="1">
    </div>

</body>

Answer 1

嗨ritchieRitchie，

我不确定我是否正确理解了你的问题，但是这里有一点点修改你的代码用剪辑解决了。

通常我会在容器div悬停之前隐藏文本，而当容器悬停时会像其他三个一样更改背景不透明度。并且还为所有4个部分添加了相同的示例文本。

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  display: block;
  height: 100%;
  margin: 0 auto;
  max-width: 100%;
  background-image: url('https://s10.postimg.org/dibczxad5/mallard0.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
        
.homePage div {
  width: 50%;
  height: 50%;
  float: left;
}

.logo {
  position: absolute;
  top: 30%;
  left: 44%;
  z-index: 10;
  display: block;
}

.container {
  max-width: 100%;
  max-height: 100%;
}

#tLeft {
  top: 0;
  left: 0;
  right: 50%;
  bottom 50%;
  background: rgba(10, 95, 107, 1);
}

#tLeft:hover {
  background-color: rgba(10, 95, 107, .3);
}

#tRight {
  top: 0;
  left: 50%;
  right: 0;
  bottom: 50%;
  background: rgba(67, 70, 75, 1);
}

#tRight:hover {
  background: rgba(67, 70, 75, .3);
}

#bLeft {
  top: 50%;
  left: 0;
  right: 50%;
  bottom: 0;
  background: rgba(251, 201, 80, 1);
}

#bLeft:hover {
  background: rgba(251, 201, 80, .3);
}

#bRight {
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  background: rgba(186, 77, 25, 1);
}

#bRight:hover {
  background: rgba(186, 77, 25, .3);
}

.hover-container {
  position: absolute;
}

.hover-container .hover h2 {
  visibility: hidden;
}

.hover-container:hover .hover h2 {
  visibility: visible;
  transition: opacity .75s ease-out;
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  right: 0;
  padding: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  font-size: 1em;
  color: white;
  background-color: rgba(153, 153, 153, .9);
  opacity: 1;
}

<body class="homePage">

  <header>
    <a href="#"><img src="asset/images/LOGO.png" class="logo"></a>
  </header>

  <div id="tLeft" class="hover-container" alt="1">
    <div class="hover">
      <h2><strong>Graphic Design1</strong> Lorem ipsum</h2>
    </div>
  </div>

  <div id="tRight" class="hover-container" alt="1">
    <div class="hover">
      <h2><strong>Graphic Design2</strong> Lorem ipsum </h2>
    </div>
  </div>

  <div id="bLeft" class="hover-container" alt="1">
    <div class="hover">
      <h2><strong>Graphic Design3</strong> Lorem ipsum</h2>
    </div>
  </div>

  <div id="bRight" class="hover-container" alt="1">
    <div class="hover">
      <h2><strong>Graphic Design4</strong> Lorem ipsum</h2>
    </div>
  </div>

</body>

如果您想要隐藏元素并采取行动，请使用display代替visibility规则：

.hover-container .hover h2 {
  display: none;
}

.hover-container:hover .hover h2 {
  display: initial;
}

有关display和visibility之间差异的更多信息，例如：在W3Schools page。

如何在悬停前不显示文字

1 个答案:

嗨ritchieRitchie，

干杯