Как добавить два эффекта зависания в тот же div

Question

Итак, у меня есть div, который появляется в верхней части экрана, и когда вы наводите на него курсор, в нижней части экрана появляется текст.

Я хочу добавить еще один эффект в div, который делает больше текста отображаемым в совершенно другом месте на экране, в то время как другой текст остается в одном и том же месте.

Возможно ли это? Предпочтительно использовать CSS/HTML вместо Java или что-нибудь еще?

Answer 1

Вы можете использовать оператор (тильда), предназначенный для всех ваших братьев и сестер (все они должны иметь одинаковые родительские). Пожалуйста, посмотри на примере ниже фрагмент коду:

body { margin: 0; } 
 

 
.holder { 
 
    text-align: center; 
 
    height: 100vh; 
 
} 
 

 
.hover { 
 
    position: absolute; 
 
    top: 10%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    color: red; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    border: 2px solid red; 
 
    padding: 10px 15px; 
 
    cursor: default; 
 
    transition: all .2s linear; 
 
} 
 

 
.hover:hover { 
 
    background: rgba(255, 0, 0, 0.1); 
 
} 
 

 
.hover:hover ~ .show-text { 
 
    opacity: 1; 
 
    transition: all .2s linear; 
 
} 
 

 
.show-text { 
 
    position: absolute; 
 
    opacity: 0; 
 
    font-size: 20px; 
 
    border-bottom: 1px solid #aaa; 
 
    transition: all .2s linear; 
 
} 
 

 
.one { 
 
    bottom: 20%; 
 
    left: 20%; 
 
} 
 

 
.two { 
 
    bottom: 20%; 
 
    right: 20%; 
 
}

<div class="holder"> 
 
    <div class="hover">Hover Me!</div> 
 
    <div class="show-text one">I'm Text 1</div> 
 
    <div class="show-text two">I'm Text 2</div> 
 
</div>

Надеется, что это помогает!