Question

我有5条文本，其中2条是隐藏的。在下面的js代码中，我可以使用click看到这两个文本，但是我需要使用hover效果。我该怎么解决？

js：

$('p#string').click(function(e) {
  e.preventDefault();
  $(this).find('span.span_icon').toggleClass('active');
});

$('.btn').on('click', function () {
    if ($(this).parent().height() >= 50) {
        $(this).parent().animate({
            height: 25 + 'px'
        });
        $(this).parent().parent().removeClass('active-animated').css('zIndex','1');
        $(this).parent().parent().parent().css('zIndex','1');
    } else {
        $(this).parent().animate({
            height: 100 + '%'
        });
        $(this).parent().parent().parent().css('zIndex','9999');
        $(this).parent().parent().addClass('active-animated');
    }
});

html：

<div class="bottom">
<a href="">First Text</a>
<a href="">Second Text</a>
<a href="">Third Text</a><br>
<a href="">Fourth Text</a>
<a href="">Fifth Text</a>    
<p id="string" class="btn"><span class="span_icon">+</span></p>
</div>

我需要进行悬停效果，这意味着当我将鼠标悬停在我的文本块上时，我需要查看另外2个隐藏的文本。帮助我解决这个问题。

Answer 1

如果适合您，您总是可以使用 PURE CSS 来做到这一点。

.bottom {
  overflow: hidden;
  height: 25px;
  width: 100%;
}

.bottom a {
  height: 25px;
  display: inline-block;
}

#wrap {
  position: relative;
  margin-bottom:25px;
}

#btn {
  cursor: pointer;
  position: absolute;
  bottom: -50px;
  left: 0;
  height: 30px;
  width: 30px;
}

#btn:hover+.bottom {
  height: auto;
}

<div id="wrap">
  <p id="btn">+</p>
  <div class="bottom">
    <a href="">First Text</a>
    <a href="">Second Text</a>
    <a href="">Third Text</a><br>
    <a href="">Fourth Text</a>
    <a href="">Fifth Text</a>
  </div>
</div>

或将鼠标悬停在所有内容上

.bottom {
  overflow: hidden;
  height: 25px;
  width: 100%;
  transition: all ease-in-out 0.5s;
}

.bottom a {
  height: 25px;
  display: inline-block;
}

#wrap:hover .bottom {
  height: auto;
}

<div id="wrap">
  <div class="bottom">
    <a href="">First Text</a>
    <a href="">Second Text</a>
    <a href="">Third Text</a><br>
    <a href="">Fourth Text</a>
    <a href="">Fifth Text</a>
  </div>
  <p id="string" class="btn"><span class="span_icon">+</span></p>
</div>

Answer 2

使用$('.btn').on('click')代替$('.btn').on('mouseOver')

Answer 3

Css选择器可以用作鼠标悬停。在下面的代码中，使用css选择器将“ a”标签更改为黄色背景

a:hover { 
  background-color: yellow;
}

对于悬停JavaScript函数，jquery可以按以下方式使用

   

 $('.btn').hover(function () {
        if ($(this).parent().height() >= 50) {
            $(this).parent().animate({
                height: 25 + 'px'
            });
            $(this).parent().parent().removeClass('active-animated').css('zIndex','1');
            $(this).parent().parent().parent().css('zIndex','1');
        } else {
            $(this).parent().animate({
                height: 100 + '%'
            });
            $(this).parent().parent().parent().css('zIndex','9999');
            $(this).parent().parent().addClass('active-animated');
        }
    });

   

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="bottom">
    <a href="">First Text</a>
    <a href="">Second Text</a>
    <a href="">Third Text</a><br>
    <a href="">Fourth Text</a>
    <a href="">Fifth Text</a> 
    <br>
    <Button id="string" class="btn"><span class="span_icon">+</span></Button>
    </div>

如何使用悬停效果阅读更多文本

3 个答案: