如何使用只有CSS悬停显示表？ [英] How to display table on hover using only css?
本文介绍了如何使用只有CSS悬停显示表？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
是否有可能在使用css悬停数据时显示表格？
就像您将鼠标悬停在亚马逊上的购物车上一样，购物车中的商品显示：
使用脚本比使用css更好吗？
购物车小部件：
< a href =viewCart>< fmt：message key ='cart'/>
< img style =width：20px; height：20px; alt =src =images / cart-icon.pngalign =topvspace =8> （$ {cart.numberOfItems}）< / A>
标题CSS：
#headers {
padding：0;
overflow：hidden;
border-bottom-color：＃f8f8f8;
text-transform：none;
宽度：100％;
height：40px;
背景颜色：＃333333;
margin-top：-4px;
border-bottom-width：0.1em;
颜色：#eaeaea;
font-style：normal;
font-size：small;
font-family：Arial，Helvetica，sans-serif;
最大宽度：100％;
text-decoration：none;
display：block;
位置：固定;
font-weight：bold;
z-index：10;
最大高度：40px;
line-height：200％;
}
#logo_container {
border-style：solid none none;
border-top：0.2em solid #cccccc;
padding：0;
最大高度：50px;
font-size：small;
text-align：right;
height：50px;
最大宽度：100％;
text-transform：capitalize;
font-family：PRINT CLEARLY;
宽度：100％;
text-decoration：none;
z-index：10;
font-style：normal;
背景颜色：＃333333;
margin-top：30px;
位置：固定;
颜色：＃666666;
font-weight：bold;
}
<％ - Cart Widget - ％>
< a href =viewCartid =ShowCart>< fmt：message key ='cart'/>
< img style =width：20px; height：20px; alt =src =images / cart-icon.pngalign =topvspace =8> （$ {cart.numberOfItems}）< / A>
< table id =minicart>
< tr>
< td> img< / td>
< td>名称< / td>
< / tr>
< tr>
< td> img< / td>
< td>名称< / td>
< / tr>
< tr>
< td>< a href =viewCart>查看购物车（$ {cart.numberOfItems}）< / a>< / td>
< / tr>
< / table>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
< / div>
解决方案
有一些使用css的实现方法，请参阅演示
示例
HTML
< a href =viewCartid =ShowCart> show cart 一个>
< table id =cart>
< tr>
< th colspan =2>我的购物车< / th>
< / tr>
< tr>
< td>第1项< / td>
< td> $ 300< / td>
< / tr>
< tr>
< td>第2项< / td>
< td> $ 700< / td>
< / tr>
CSS
#cart {
display：none;
}
#ShowCart：hover + #cart {
display：block;
}
使用原始代码：
< style type =text / css>
#minicart {
display：none;
}
#ShowCart：hover + #minicart {
display：block;
}
< / style>
< a href =viewCartid =ShowCart>< fmt：message key ='cart'/>
< img style =width：20px; height：20px; alt =src =images / cart-icon.pngalign =topvspace =8> （$ {cart.numberOfItems}）< / A>
< table id =minicart>
< tr>
< td> img< / td>
< td>名称< / td>
< / tr>
< tr>
< td> img< / td>
< td>名称< / td>
< / tr>
< tr>
< td>< a href =viewCart>查看购物车（$ {cart.numberOfItems}）< / a>< / td>
< / tr>
< / table>
Is it possible to display a table on hover with data using only css?
Like when you hover your mouse on your cart on Amazon the items in your cart display:
Is it better practice using a script than css?
The cart widget:
<a href="viewCart"><fmt:message key='cart'/>
<img style="width: 20px; height: 20px;" alt="" src="images/cart-icon.png" align="top" vspace="8"> (${cart.numberOfItems})</a>
The header CSS:
#headers {
padding: 0;
overflow: hidden;
border-bottom-color: #f8f8f8;
text-transform: none;
width: 100%;
height: 40px;
background-color: #333333;
margin-top: -4px;
border-bottom-width: 0.1em;
color: #eaeaea;
font-style: normal;
font-size: small;
font-family: Arial, Helvetica, sans-serif;
max-width: 100%;
text-decoration: none;
display: block;
position: fixed;
font-weight: bolder;
z-index: 10;
max-height: 40px;
line-height: 200%;
}
#logo_container {
border-style: solid none none;
border-top: 0.2em solid #cccccc;
padding: 0;
max-height: 50px;
font-size: small;
text-align: right;
height: 50px;
max-width: 100%;
text-transform: capitalize;
font-family: PRINT CLEARLY;
width: 100%;
text-decoration: none;
z-index: 10;
font-style: normal;
background-color: #333333;
margin-top: 30px;
position: fixed;
color: #666666;
font-weight: bold;
}
<%--Cart Widget--%>
<a href="viewCart" id="ShowCart"><fmt:message key='cart'/>
<img style="width: 20px; height: 20px;" alt="" src="images/cart-icon.png" align="top" vspace="8"> (${cart.numberOfItems})</a>
<table id="minicart">
<tr>
<td>img</td>
<td>name</td>
</tr>
<tr>
<td>img</td>
<td>name</td>
</tr>
<tr>
<td><a href="viewCart">View Cart (${cart.numberOfItems})</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
there are some ways of implementing that using css, see demo example
HTML
<a href="viewCart" id="ShowCart">show cart</a>
<table id="cart">
<tr>
<th colspan="2">My Cart</th>
</tr>
<tr>
<td>Item 1</td>
<td>$300</td>
</tr>
<tr>
<td>Item 2</td>
<td>$700</td>
</tr>
CSS
#cart{
display:none;
}
#ShowCart:hover + #cart{
display:block;
}
WITH THE ORIGINAL CODE:
<style type="text/css">
#minicart{
display:none;
}
#ShowCart:hover + #minicart{
display:block;
}
</style>
<a href="viewCart" id="ShowCart"><fmt:message key='cart'/>
<img style="width: 20px; height: 20px;" alt="" src="images/cart-icon.png" align="top" vspace="8"> (${cart.numberOfItems})</a>
<table id="minicart">
<tr>
<td>img</td>
<td>name</td>
</tr>
<tr>
<td>img</td>
<td>name</td>
</tr>
<tr>
<td><a href="viewCart">View Cart (${cart.numberOfItems})</a></td>
</tr>
</table>
这篇关于如何使用只有CSS悬停显示表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
