Question

最初的想法来自以下

http://freshdesignweb.com/demo/2012/09/css3-hover-effects/

这是一个简单的鼠标悬停在图像上，然后与该图像相关的文字就会落在它下面。

我想修改文本显示的区域，以添加丰富的代码段，立即购买按钮和添加到购物车按钮。我有两个问题1）在li之间添加的任何img scr会自动出现在图像框中，2）你点击图像或框的任何地方都会带你到另一个页面，因为它是一个锚。

css

.our_menu{width:970px; margin:0 auto;}
ul,li{margin:0;padding:0;list-style:none}
.menu .item{float:left;position:relative}
.menu .item a{background-color:#FFF;color:#000000;display:block;overflow:hidden;position:absolute;box-shadow:0 0 7px 0 #CCC;-moz-box-shadow:0 0 7px 0 #CCC;-webkit-box-shadow:0 0 7px 0 #CCC}
.menu .item a:hover{z-index:2;-webkit-transition:height .2s ease-in-out;-moz-transition:height .2s ease-in-out;-o-transition:height .2s ease-in-out;-ms-transition:height .2s ease-in-out;transition:height .2s ease-in-out}
.menu .item a h3{border:0;font-family:"Times New Roman",sans-serif;font-size:17px;margin:0 0 .5em 0;padding:0;text-transform:uppercase;}
.menu .item a p{color:#432;font-size:16px;}
.our_menu .menu{float:left;margin:0 0 50px 0}
.our_menu .menu .item{background-position:9px -791px;height:170px;padding:0 0 0 7px;width:316px}
.our_menu .menu .item a{height:25px;padding:114px 0 0 14px;top:10px;width:295px;text-decoration:none;}
.our_menu .menu .item a:hover{height:550px;padding-top:179px}
.our_menu .menu .item a img{clip:rect(0px,283px,96px,0px);height:164px;position:absolute;top:14px;width:283px}
.our_menu .menu .item a:hover img{clip:auto}
@media only screen and (max-width: 967px) {
.our_menu{ width:660px;margin:0 auto;}
}
@media only screen and (max-width: 620px) {
.our_menu{ width:330px;margin:0 auto;}
}

原创html

<div class="our_menu">
    <ul class="menu">
        <li class="item">              
            <a href="#">                    
                <h3>Appetizers</h3>                    
                <p> Start a meal off right with your favorite from our menu of signature appetizers. Can't choose just one? You don't have to</p>                    
                <img src="images/2.jpg" alt="" height="164" width="283">                
            </a>            
        </li>

以下是我需要用来在框中制作文本的丰富代码段。

<span itemscope itemtype="http://schema.org/Product">
    <img itemprop="image" src="http://www.example.com/images/hello.jpg" />
    <h3 itemprop="name">Name of Product Here</h3>
    <a itemprop="url" href="http://www.example.com/index.html"></a>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
    <span itemprop="description">Widget</span><br/>
    UPC: 1234567890
</p>
<span>

以下是我的工作，直到我想添加立即购买按钮并添加到购物车按钮。

<a class="paypal"><img src="images/cart.gif" alt=""></a><a class="paypal"><img src="images/buynow.gif" alt=""></a>


<div class="our_menu">
    <ul class="menu">
    <li class="item">   
        <a itemprop="url" href="http://www.example.com/">       
<span itemscope itemtype="http://schema.org/Product">
    <img itemprop="image" src="images/hello.jpg" height="164" width="283"/>
    <h3 itemprop="name">Product Name</h3>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer"><h3 itemprop="price" class="price">$2.00</h3></span>
<p>
<span itemprop="description">Widget</span><br/>
    UPC: 074804800012<br/>
</p>
</a>
</li>

我为这个建议创建了一个jsFiddle。

http://jsfiddle.net/3CmGN/

当您将鼠标悬停在图像上时，包含文字的框会下降。我想要这样的效果。我遇到的问题是我不希望图像作为锚标记，并且想要在示例中的UPC下添加“添加到购物车”和“立即购买”按钮。

将鼠标悬停在文本框上更改css

0 个答案: