Question

我正在创建一个使用类似元素的网站 this site。

将鼠标悬停在图片链接上的位置，div会以正确的格式显示。代码变得相当令人筋疲力尽，我能够复制代码，但我得到的java代码只允许我只使用一个<li>，这意味着每次我徘徊时都会弹出相同的<li>不同的<li>。

脚本：

<!-- Hover Drop -->
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#product-data").hide();

    var isMousedOver;

    var hideDropdown = function (a) {
        setTimeout(function () {
            if (isMousedOver) return;
            $("#product-data").slideUp("medium");
            $(a).removeClass("active");
        }, 100);
    }

    $(".btn-slide").hover(

    function () {
        $("#product-data").stop(true, true).slideDown("medium");
        isMousedOver = true;
        $(".btn-slide").removeClass("active");
        $(this).addClass("active");
        var that = this;
        $("#product-data").data("mouseoutfn", function () {
            hideDropdown(that)
        });
    },

    function () {
        isMousedOver = false;
        hideDropdown(this);
    });

    $("#product-data").hover(

    function () {
        isMousedOver = true;
    },

    function () {
        isMousedOver = false;
        $(this).data("mouseoutfn")();
    });

});
</script>

HTML：

<li class="item first">
    <div class="hover-cut"> <a href="" class="btn-slide"><img src="../images/mexalturantollan.png" width="172" height="120"
               alt="Mexalturan"></a>

         <h2 class="product-name">Organic Mexico
               ‘Altura Tollan’ Fair Trade</h2>

        <div class="price-box"><span class="price-label">$13.37 per lb</span> 
            <div id="product-data">
                <div class="details"><u>Flavor Profile:&nbsp;</u>
Noted for ...........................</div>
            </div>
        </div>
</li>
<li class="item first">
    <div class="hover-cut"> <a href="" class="btn-slide"><img src="../images/mexspirits.png" width="172" height="120" alt=""></a>

         <h2 class="product-name">Mexican ‘Spirit of the Aztec’</h2>

        <div class="price-box"> <span class="price-label">$12.38 per lb</span>

            <div class="product-data1"> <u>Flavor Profile:&nbsp;</u>
Time to .........................</div>
        </div>
</li>

CSS：

.theshopbox ul.gridrow1 li.item.first {
    margin-right: 25px;
}
#hover-cut {
    position: relative;
    padding: 20px;
    width: 230px;
    overflow:visible;
    z-index: 999;
}
#product-data {
    background-color: rgb(5, 22, 7);
    box-shadow: 2.5px 4.33px 5px 0px rgb(0, 0, 0);
    /* Rounded Corners */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    display: none;
    position:relative;
    border-radius: 18px;
    overflow: visible;
    width: 256px;
    z-index:-4;
}
.price-box {
    float:left;
}
.product-name {
    font-size: 14px;
    font-weight: bold;
}
.details {
    font-size: 12px;
    margin-left: 28px;
    margin-right: 28px;
    text-align:left;
}
.active {
}
.gridrow1 .item #product-data {
    display: block;
    margin-top: 4px;
}
.gridrow1 .item #product-data {
    display: none;
}
.products-grid .learn-more {
    display: inline-block;
    font-weight: bold;
    font-size: 13px;
    color: #361a00;
    margin-top: 2px;
}
.gridrow1 li.item {
    float: left;
    width: 256px;
    padding: 0px 10px 0px 0px;
    overflow: hidden;
    position: relative;
    height: 294px;
}
.theshopbox {
    width: 930px;
    height: 1200px;
    float: left;
    margin-top: 23px;
    position: relative;
    left: 6px;
    top: 80px;
    z-index: 1;
    color: #0A0A0A;
}

如果有人能引导我走向正确的方向，我会非常感激！

Answer 1

在您的悬停功能中，您只定位于#product-data。

你需要做类似

的事情

$(this).find('.element-to-show').slideDown()

$(this)是当前悬停的元素，然后您选择要在当前元素中显示的元素。

Answer 2

它只是jquery中的.hover函数，您需要定义元素onload的高度并在鼠标悬停时更改其高度。试试这个

<div class="element"></div>
<div class="element"></div>
<div class="element"></div>

的CSS

.element
{width:100px;
height:150px;
background:#ccc;
float:left;
margin-left:10px;
cursor:pointer;
}

jquery的

$('.element').hover(function() {
$(this).css('height', '300px');
},
function() {
$(this).css('height', '100px'); 
});

检查Demo

Answer 3

$(".btn-slide").hover(

function () {
    $("#product-data").stop(true, true).slideDown("medium");
    isMousedOver = true;
    $(".btn-slide").removeClass("active");
    $(this).addClass("active");
    var that = this;
    $("#product-data").data("mouseoutfn", function () {
        hideDropdown(that)
    });
},

在悬停时，您显示的是id-product-data的信息，该信息仅涉及一种产品

使用$（this）.find（）或jquery遍历来解决此问题。

这是link

使用Javascript创建下拉div

3 个答案: