Question

我想知道当鼠标悬停在该区域时如何显示文本。但是，我不希望在此之前出现该文本。

目前，我已经创建了类似于按钮的框。我想知道是否有更好的方法编写代码。

我已附上当前图片和我想要的。（对不起，照片不好！）

谢谢！

当前：悬停之前（当前）：https://imgur.com/gallery/NeBxodJ 悬停后（当前）：https://imgur.com/gallery/4Hk598C

我想要的东西：悬停之前（我想要的）：https://imgur.com/gallery/lRAiPqc 悬停之后（我想要的）：https://imgur.com/gallery/VCh0qeo

HTML：

<div class="sections">
  <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
  <section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs"single">
  <div class="container">
    <div id="row_1" class="row">
      <div id="column_a" class="column" data-xl-width="12">
        <div class="content-wrapper">
          <div id="content_1" class="column-content" data-module="portfoliogrid">
            <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">
              <div class="masonry-item-width"></div>

              <!-- Project 1 -->
              <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 0%; opacity:1;">Typography</div>

              <!-- Project 2 -->
              <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>

              <!-- Project 3 -->
              <div id="project1" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>

              <!-- Project 4 -->
              <div id="project2" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </section>
</div>

CSS：

.button {
  background-color: #4caf50;
  border: none;
  color: white;
  padding: 150px 200px;
  position: flex;
  font-family: 'Yantramanav', sans-serif;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1.5px;
  font-size: 15px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
}

.button1 {
  background-color: #087084;
}

.button1:hover {
  background-color: #56b1bf;
  color: white;
}

Answer 1

获得所需东西的许多方法。这是一个简单的html / css示例：

div {
  background-color: #087084;
  padding: 50px;
}

div:hover {
  background-color: #56B1Bf;
}

span {
  visibility: hidden;
}

div:hover span {
  visibility: visible;
}

<div><span>Text</span></div>

Answer 2

当鼠标悬停并离开时，您可以运行一个函数。您可以将其添加到所有四个div中。请注意，我更改了Divs的ID，因为所有ID应该都是唯一的。

function changeText(e, text) {
  e.innerHTML = text;
}

<div class="sections">
  <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
  <section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs "single">
    <div class="container">
      <div id="row_1" class="row">
        <div id="column_a" class="column" data-xl-width="12">
          <div class="content-wrapper">
            <div id="content_1" class="column-content" data-module="portfoliogrid">
              <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">

                <div class="masonry-item-width"></div>
                <!-- Project 1 -->

                <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" onmouseover="changeText(this, 'Typography')" onmouseleave="changeText(this, 'Default Text')" style="position:absolute; left:0%; top: 0%; opacity:1;">zz</div>
                <!-- Project 2 -->
                <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>
                <!-- Project 3 -->
                <div id="project3" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>
                <!-- Project 4 -->
                <div id="project4" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Answer 3

使用Jquery，DEMO解决方案 https://jsfiddle.net/k59c1sfn/

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
 .button {
background-color: #4CAF50; 
border: none;
color: white;
padding: 150px 200px;
position: flex;
font-family: 'Yantramanav', sans-serif;
text-align: center;
text-decoration: none;
letter-spacing: 1.5px;
font-size: 15px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; 
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;
}

.text {
visibility:hidden;
}

.button1 {
   background-color: #087084; 
}

.button1:hover {
  background-color: #56B1Bf;
  color: white;
}
</style>

</head>
<body>

<div class="sections">
   <section id="section_a" class="content-block" data-column-mode-sm="single" data-column-mode-xs="single"></section>
<section id="section_b" class="content-block" data-column-mode-sm="single" data-column-mode-xs"single">
  <div class="container">
    <div id="row_1" class="row">
       <div id="column_a" class="column" data-xl-width="12">
      <div class="content-wrapper">
         <div id="content_1" class="column-content" data-module="portfoliogrid">
            <div id="masonry-content" class="masonry" style="position: relative; height: 506.25px;">

                          <div class="masonry-item-width"></div>
                                    <!-- Project 1 -->

                         <div id="project1" class="button button1" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 0%; opacity:1;"><span class="text">Typography</span></div>
                                    <!-- Project 2 -->
                                    <div id="project2" class="button button2" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 0%; opacity:1;">Colour, Visual Language</div>
                                    <!-- Project 3 -->
                                    <div id="project1" class="button button3" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:0%; top: 253px; opacity:1;">UI/UX Case Study</div>
                                    <!-- Project 4 -->
                                    <div id="project2" class="button button4" data-xl-width="6" data-sm-width="6" data-xs-width="12" style="position:absolute; left:49.8664%; top: 253px; opacity:1;">Display Work</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
    $('.button1').mouseover(function() {
  $('.text').css("visibility","visible");
});

$('.button1').mouseout(function() {
  $('.text').css("visibility","hidden");
});
    </script>



</body>
</html>

鼠标悬停在文本上方后如何显示文本？

3 个答案: