Question

是否可以仅使用css在数据悬停时显示数据？

就像当您将鼠标悬停在亚马逊上的购物车上时，购物车中的商品会显示：

enter image description here

使用脚本比使用css更好吗？

购物车小部件：

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

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

Answer 1

有一些方法可以使用css实现，请参阅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;
}

使用原始代码：

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

Answer 2

CSS ：hover 适合在悬停时向元素添加css规则。例如，如果您有类似p:hover {color: red}的内容，则浏览器会在悬停时将p颜色更改为红色。但是如果你想在悬停时改变DOM结构（比如添加一个元素，删除一个元素......），最好使用jquery。你可以这样做：

$("#cart > .heading").hover(function(){
   //function for adding div under cart goes here
}, function(){
   //function for removing div goes here
});

Answer 3

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

我认为这可能会对你有所帮助。

如何仅使用css在悬停上显示表格？

3 个答案: