使用Jquery或JavaScript替换悬停时的文本

时间：2017-11-22 23:24:48

标签： javascript jquery html css

我正在寻找一种使用Jquery或JS的方法，以便当我将鼠标悬停在其中一个div上时，文本和图标消失，并显示“Read More”。我已经看过一些指南，但它们似乎并没有真正完成整个工作，它删除了一行文本而不是清除整个div，并在鼠标悬停时将其替换为居中的“Read More”文本，然后返回鼠标退出悬停时的正常文本。有没有人有什么建议？ div在实际页面上是水平的，不知道为什么它在这里显示为垂直。

.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}

.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
    </div>
  </div>


</div>

4 个答案:

答案 0 :(得分：0)

为了做到这一点，我建议你使用仅CSS解决方案。

添加新div，将其定位absolutely，然后在功能框悬停上显示它。

为了使位置有效，功能框必须包含position: relative，新div应该有更大的z-index和top: 0;设置

答案 1 :(得分：0)

您可以使用css来实现它，如果您需要，请参阅下文。

＆＃13;
＆＃13; 
.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}

.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
  display: inline-block;
}

span.read-more {
  display: none;
  font-weight: bold;
  position: absolute;
  z-index: 10;
  top: 0;
}

.feature-box:hover p {
  display: none;
}

.feature-box:hover span.read-more {
  display: block;
  position: relative;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p><span class="read-more">read more</span>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p><span class="read-more">read more</span>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p><span class="read-more">read more</span>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
      <span class="read-more">read more</span>
    </div>
  </div>


</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这应该可以帮助您入门..我正在使用.css('visibility', 'hidden');来隐藏文本，因为我不想更改或更改框高度。 当然，如果不是你需要的情况（你只能使用一些css来修复高度）那么你可以使用.hide()和.show()来显示和隐藏鼠标事件上的文字

$('.feature-box').on('mouseenter', function(){
  $(this).find('i, h4:not(.rm), p').css('visibility', 'hidden');
  $(this).find('h4.rm').css('visibility', 'visible');
});

$('.feature-box').on('mouseleave', function(){
  $(this).find('i, h4:not(.rm), p').css('visibility', 'visible');
  $(this).find('h4.rm').css('visibility', 'hidden');
});
.feature-container {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 9;
  width: 100%;
  display: inline-block;
}
h4.rm{ visibility: hidden; }
.feature-box {
  background: #fff;
  text-align: center;
  padding: 40px 30px;
  position: relative;
  width: 25%;
}

.feature-box i {
  font-size: 50px;
  margin-bottom: 15px;
  cursor: pointer;
}

.feature-box:hover {
  background: #208541 !important;
  color: #f6f6f6;
}

.feature-box.dark {
  background: #f6f6f6;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature-container">


  <div class="feature-box-container feature-slider">
    <div class="feature-box">
      <i class="ion-ios-list-outline"></i>
      <h4>Content</h4>
      <h4 class="rm">Read more</h4>
      <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>

    </div>
    <div class="feature-box dark">
      <i class="ion-ios-cog-outline"></i>
      <h4>Customization</h4>
      <h4 class="rm">Read more</h4>
      <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
    </div>
    <div class="feature-box">
      <i class="ion-help"></i>
      <h4>Support</h4>
      <h4 class="rm">Read more</h4>
      <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
    </div>
    <div class="feature-box dark">
      <i class="ion-social-usd-outline"></i>
      <h4>Value</h4>
      <h4 class="rm">Read more</h4>
      <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
    </div>
  </div>


</div>

答案 3 :(得分：0)

如果你不需要动态操作de'box'，你可以使用一些额外的标签和css这样做：

.feature-container{ box-shadow:0 1px 6px rgba(0,0,0,0.1); position:relative; z-index:9;  width:100%; display:inline-block;}
.feature-box{background:#fff; text-align:center; padding:40px 30px; position:relative; width:25%;display:inline-block;}
.feature-box i{font-size:50px; margin-bottom:15px; cursor:pointer;}
.feature-box:hover{background:#208541 !important; color:#f6f6f6;}
.feature-box.dark{background:#f6f6f6;}

.feature-box .mask{display:none;}
.feature-box:hover .mask{background-color:#333;color:white;position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;text-align:center;display:block;}
.feature-box:hover .mask span{position: relative;float: left;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="feature-container" >


		<div class="feature-box-container feature-slider">
        	<div class="feature-box">
            	<i class="ion-ios-list-outline"></i>
                    <h4>Content</h4>
                    <p>Effective learning methodology that focuses on concepts and understanding of AICPA blueprints.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box dark">
            	<i class="ion-ios-cog-outline"></i>
                    <h4>Customization</h4>
                    <p>Adaptive content for a custom learning experience and individualized delivery through AdaptaPASS.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box">
            	<i class="ion-help"></i>
                    <h4>Support</h4>
                    <p>Direct access to our instructors and CPAs, by phone, email, or via our student-only message board.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
            <div class="feature-box dark">
            	<i class="ion-social-usd-outline"></i>
                    <h4>Value</h4>
                    <p>Everything you need -- for less. Our course bundle costs hundreds less than competitors.</p>
                    <a class="mask" href="#"><span>read more</span></a>
            </div>
         </div>


  </div>

如果您对“阅读更多”文字不需要任何花哨的样式，您可以使用.feature-box:hover::before{}添加文本并将其居中，就像我使用.mask span一样。

相关问题
最新问题