CSS hover table cell - html

Question

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>€</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>
Start Now
</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?

Answer 1

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!

Answer 2

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/

Answer 3

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

Answer 4

Simply do this
HTML Code:
<div class="plan">
<h2 class="title">Premium</h2>
<div align="center">
<p class="plan-price">499<span>€</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>
Start Now
</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/