如何仅使用CSS在悬停时显示表格？
[英]How to display table on hover using only css?
问题描述
Is it possible to display a table on hover with data using only css? 
是否可以仅使用CSS在带有数据的悬停表格上显示表格？
Like when you hover your mouse on your cart on Amazon the items in your cart display: 就像当您将鼠标悬停在Amazon上的购物车上时，购物车中显示的项目一样：
Is it better practice using a script than css? 使用脚本比使用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: 标头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>
3 个解决方案
解决方案1
2 2015-03-14 06:01:10
there are some ways of implementing that using css, see demo example 有一些使用CSS来实现的方法，请参见演示示例
HTML 的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 的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>
解决方案2
1 2015-03-14 05:05:01
CSS :hover is suitable for adding css rule to element on hover. CSS ：hover适用于将css规则添加到悬停元素上。 For example if you have something like p:hover {color: red} , browsers change p color to red on hover. 例如，如果您有类似p:hover {color: red} ，浏览器在悬停时会将p color更改为red。 But if you want to change DOM structure(like add an element, remove an element, ...) on hover, it's better to use jquery. 但是，如果要在悬停时更改DOM结构（例如添加元素，删除元素等），最好使用jquery。 You can do this: 你可以这样做：
$("#cart > .heading").hover(function(){
//function for adding div under cart goes here
}, function(){
//function for removing div goes here
});
解决方案3
1 2015-03-14 05:09:35
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").hover(function(){
$('table').css({'display':'block'});
},function(){
$('table').css({'display':'none'});
});
});
</script>
</head>
<body>
<p>Cart.</p>
<table style='display:none' >
<tr>
<th>heading</th></tr>
</table>
</body>
</html>
I think it may helps you. 我认为这可能对您有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.