Hover parent div; показать текст в дочернем div. Не показывать текст при наведении на ребенка div

Question

Очень новый для HTML и CSS. Я, наконец, понял, как навести div и заставить отображать текст в другом div. Но что происходит тогда, когда я навеваю div, где появляется текст, который тоже показывает текст; которого я не хочу.

<div class="leaf5"> 

    <img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'"> 

    <div class="cashdup-info"> 

     <h3 class="cashdup-text"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3> 

    </div> 

    </div> 

Есть ли способ, чтобы навести DIV под названием «leaf5» и есть что показать текст в другой DIV без текста, показывая, если я парить фактический DIV текст, содержащийся в Мой CSS выглядит следующим образом.:

.cashdup-text { 
    font-weight: 100; 
    font-size: 22px; 
    display: none;  
} 

.leaf5:hover .cashdup-text { 
    display: block;   
} 

Thanks.

Answer 1

.leaf5:hover .cashdup-text:hover { 
    visibility: hidden; 
} 

я бы не использовать display: none здесь, потому что элемент, который имеет display: none логически не может быть в состоянии парения.

Answer 2

использовать этот путь:

Demo

Demo for singlle image only

CSS

ДИВ { дисплей: нет; }

img: hover + div { дисплей: блок; }

HTML

<img src="image/imh.pmg"> 
<div>Stuff shown on hover</div> 

Answer 3

Попробуйте добавить это к вашей таблице стилей:

.leaf5:hover .cashdup-text { 
    opacity:0;   
} 
.cashdup-text { 
    opacity:1;  
} 

Answer 4

вопрос вы столкнулись, когда вы применяете hover своим leaf5 DIV он отображает cashdup-text, который затем увеличивает площадь leaf5, включая текстовую часть. Вот почему, когда вы показываете текст, вы не можете заставить его исчезнуть. Потому что вы уже его вибрируете.

Вы можете попробовать абсолютное положение, как таким образом:

CSS:

.cashdup-text { 
    font-weight: 100; 
    font-size: 22px; 
} 
.cashdup-text{ 
    position: absolute; 
    display: none; 
} 
.leaf5:hover .cashdup-text { 
    display: block; 
} 

Fiddle: https://jsfiddle.net/dqz9j2tj/

Answer 5

Проблема заключается в том, .cashdup-text является дочерним .leaf5 так, когда вы зависший над .cashdup-text, браузер видит, что вы также зависнете над .leaf5 (в некотором смысле).

Вы можете использовать JS? Если да, см. Ниже.

var showme = document.getElementById("showme"); 
 
showme.style.display = "none"; 
 
function display() { 
 
    showme.style.display = "block"; 
 
    } 
 
function hide() { 
 
    showme.style.display = "none"; 
 
    }

<div class="leaf5" onMouseOver="display();" onMouseOut="hide();"> 
 
    <img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'"> 
 
</div> 
 
<div class="cashdup-info"> 
 
    <h3 class="cashdup-text" id="showme"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3> 
 
</div>

Как вы можете видеть, я добавил id из «ShowMe» в h3 элемента вы хотите, чтобы показать/скрыть и добавили MouseOver/MouseOut события в .leaf5 дел. Я также отделил .leaf5 от div ниже, так что он не вызывает никаких проблем, подобных описанным при наведении курсора на .cashdup-text.