CODEWITHSUNDEEP
htmlcss
cbevans001
cbevans001

Reputation: 11

Hover parent div; show text in child div. Do not show text when hover child div

Very new to HTML and CSS. I've finally figured out how to hover a div and cause that to show text in another div. But what then happens is when I hover the div where the text appears that too shows the text; which I don't not want.

    <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>

Is there a way to hover the div called "leaf5" and have that show text in another div without the text showing up if I hover the actual div the text is contained in. My CSS is as follows:

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

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

Thanks.

Upvotes: 0

Views: 470

Answers (5)

Amitesh Kumar
Amitesh Kumar

Reputation: 3079

Use this way :

Demo

Demo for single image only

CSS:

div {
  display: none;
}

img:hover + div {
  display: block;
}

HTML:

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

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

Try adding this to your stylesheet:

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

Upvotes: 0

David Wilkinson
David Wilkinson

Reputation: 5118

The problem is, .cashdup-text is a child of .leaf5 so when you're hovering over .cashdup-text, the browser sees it that you're also hovering over .leaf5 (in a way).

Are you open to using JS? If so, please see below.

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>

As you can see, I've added an id of "showme" to the h3 element you want to show / hide and have added MouseOver / MouseOut events to the .leaf5 div. I've also separated .leaf5 from the div below, just so it doesn't cause any issues like you described when hovering over .cashdup-text.

Upvotes: 0

DebRaj
DebRaj

Reputation: 599

The issue you are facing is when you apply hover to your leaf5 div it displays the cashdup-text which then increases the area of leaf5 including the text part. That is why when you have text displayed you can't make it disappear. Because you are already hovering it.

You can try absolute position like this way:

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/

Upvotes: 0

KWeiss
KWeiss

Reputation: 3154

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

I wouldn't use display: none here, because an element that has display: none logically can't be in a hover state.

Upvotes: 2

Related Questions