CSS悬停表格单元格

Question

我有一张桌子，我想在悬停在细胞上时有不同的文本框。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想显示一个包含一些文本的框，例如用户将指针移到Hello1上。

这是css代码

＆＃13;

＆＃13;

.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);
	  }

＆＃13;

＆＃13;

＆＃13;

我尝试将其添加到第一个<li>代码

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但显然这个方框显示的是文字＆＃34; Hello1＆＃34;，我怎么能隐藏＆＃34; hello1＆＃34;并添加一些其他文字？

Answer 1

你可以这样做！我试着按照你的要求实施。但要解释一下你想从中实现什么。每个li元素应该有不同的文本吗？还有其他方法。哪个比这个简单

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

干杯！

Answer 2

尝试这样的事情：

<强> 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);
}

此处的完整代码：https://jsfiddle.net/5qkruhuc/

Answer 3

只需这样做

HTML代码：

            <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代码：

                .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);
                }

工作示例：https://jsfiddle.net/rajnikpatel/e7rrk9xy/

Answer 4

我使用JavaScript找到了此解决方案，但除了点击“x”外，始终显示<div id="mynav" class="box">。相反，我希望只有当我点击“Hello1”并在点击“x”后关闭时才显示该框

这是代码

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>