CODEWITHSUNDEEP
htmlcsshover
Haring
Haring

Reputation: 15

CSS hover table cell

I got a table and I would like to have different text boxes when hovering on cells. 

<div class="plan">
     <h2 class="title">Premium</h2>
     <div align="center">
       <p class="plan-price">499<span>&euro;</span></p>
     </div>
       <ul class="plan-features">
         <li><strong>Hello1</strong></li>
         <li><strong>Hello2</strong></li>
         <li><strong>Hello3</strong>></li>
         <li><strong>Hello4</strong></li>
         <li><strong>Hello5</strong></li>
       </ul>
       <a href="#" class="plan-button">Start Now</a>
</div>

I would like to show a box with some text when for example a user move the pointer over Hello1.

This is the css code

.plan-features {
            margin-bottom: 20px;
            line-height: 2;
            font-size: 12px;
            color: #999;
            text-align: center;
          }

          .plan-features > li > strong {
            font-weight: bold;
            color: #888;
          }
	  
	  .box:hover{
	    text-align: center;
	    color: white;
	    width: 200px;
	    margin: 10px -12px;
	    height: 100px;
            background-color: rgba(0,0,0, 0.8);
	  }

I tried to add this to the first <li> tag

<ul class="plan-features">
                    <div class="box"><li><strong>Hello1</strong></li></div>

but obviously the box is shown with the text "Hello1", how can i hide "hello1" and add some other text?

Upvotes: 1

Views: 651

Answers (4)

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

Simply do this

HTML Code:

            <div class="plan">
            <h2 class="title">Premium</h2>
            <div align="center">
                <p class="plan-price">499<span>&euro;</span></p>
            </div>
            <ul class="plan-features">
                <li><strong>Hello1</strong></li>
                <li><strong>Hello2</strong></li>
                <li><strong>Hello3</strong>></li>
                <li><strong>Hello4</strong></li>
                <li><strong>Hello5</strong></li>
            </ul>
            <a href="#" class="plan-button">Start Now</a>
        </div>

CSS Code :

                .plan-features {
                margin-bottom: 20px;
                line-height: 2;
                font-size: 12px;
                color: #999;
                text-align: center;
            }

                .plan-features li strong:hover {
                    text-align: center;
                    color: white;
                    width: 200px;
                    margin: 10px -12px;
                    height: 100px;
                    background-color: rgba(0,0,0, 0.8);
                }

Working example: https://jsfiddle.net/rajnikpatel/e7rrk9xy/

Upvotes: 0

Haring
Haring

Reputation: 15

I found this solution using JavaScript, but the <div id="mynav" class="box"> is always shown except when I click on "x". Instead I want that the box is shown only when I click on "Hello1" and closed after have clicked on the "x"

Here's the code

JavaScript:

<script>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}
</script>
CSS:

.plan-features {
            margin-bottom: 20px;
            line-height: 2;
            font-size: 12px;
            color: #999;
            text-align: center;
          }

          .plan-features > li > strong {
            font-weight: bold;
            color: #888;
          }
	  
	  
	  .box{
	    text-align: center;
	    color: white;
	    width: 200px;
	    margin: 10px -20px;
	    height: 100px;
            background-color: rgba(0,0,0, 0.8);
	    overflow-x: hidden;
            transition: 0.5s;
	  }
	  
	  .closeButton {
	    color: yellow;	
	    top: 20px;
            right: 45px;	
	  }
HTML:

<ul class="plan-features">
	<div id="myNav" class="box">
        <a href="javascript:void(0)" class="closebutton" onclick="closeNav()">x</a>
        <br />Some Text
	</div>	
    <li onclick="openNav()"><strong>Hello1</strong></li> 
    <li><strong>Hello2</strong></li>
    <li><strong>Hello3</strong></li>
    <li><strong>Hello4</strong></li>
    <li><strong>Hello5</strong></li>
</ul>

Upvotes: 0

Qaisar Rajput
Qaisar Rajput

Reputation: 791

You can do something like this! i tried to implement according to your requirements. But do explain what are you trying to achieve from this. Should there be different text for each li element? There are other ways too. Which would be simpler than this

HTML

 <div>
 <strong class="overlap hoverOn">Hello1</strong>
 <strong class="overlap hide">someText</strong>
 </div>

CSS

div
{
  position:relative;
}
.overlap
{
  position:absolute;
  top:0; left:0;
}
.hide { 
    display: none;
    background: red;
}

.hoverOn:hover + .hide {
    display: block;
}

JSfiddle Sample

Cheers!

Upvotes: 2

Jakob
Jakob

Reputation: 3546

Try something like this:

HTML

<li><strong hover-text="Some text1">Hello1</strong></li>

CSS

strong:hover {
  font-size: 0;
}
strong:hover:before {
  font-size: 12px;
  content: attr(hover-text);
}

Full code here: https://jsfiddle.net/5qkruhuc/

Upvotes: 0

Related Questions