如何使用只有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屋!
查看全文