Как заставить читать больше текста с помощью эффекта наведения

ProgramBox

Как заставить читать больше текста с помощью эффекта наведения

Post author:admin
Запись опубликована:19 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть 5 текстов, и 2 из них скрыты. В приведенном ниже коде js я вижу, что эти 2 текста используют 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 скрытых текста. Помогите мне в этом вопросе.

1. Если вы используете jQuery, просто измените click на mouseover , чтобы запускать событие при наведении курсора мыши на связанный элемент.

2. почему два щелчка $('p#string') and $('.btn') по обоим целевым элементам одинаковы

3. @AndroidNoobie Спасибо вам! но как я могу сделать так, чтобы весь блок, а не только значок?

Ответ №1:

Вы всегда можете просто сделать это с помощью ЧИСТОГО 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>

1. Спасибо, но как я могу навести курсор на весь блок, а не только на значок?

2. Что вы подразумеваете под all блоком? .bottom ?

3. да, мне нужно навести курсор на .bootom и не могли бы вы показать это, используя мой js код? Я пытался изменить классы, но это не помогло

4. Спасибо, это работает! и еще один вопрос. когда я вижу скрытый текст, мои нижние блоки перемещаются вниз. Как этого избежать?

Ответ №2:

Вместо $('.btn').on('click') использования $('.btn').on('mouseOver')

1. но если я хочу навести курсор на блок, а не только на значок, то как я могу это сделать? Спасибо.

2. С помощью $(‘.bottom’).on(‘Наведение курсора мыши’). Это означает, что каждый раз, когда вы наводите курсор на любую часть вашего bottom элемента (включая три текста внутри), вы будете видеть все пять из них.

Ответ №3:

Css-селектор может быть пользователем для наведения.В приведенном ниже коде мы изменим тег «a» на желтый фон с помощью css selector

 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>