Jquery 图像在悬停时放大，但在鼠标移出时垂直图像不会恢复正常

水平图像放大后恢复正常，但垂直图像放大后恢复水平而非垂直。我有。我不确定，但相信问题出在jQuery中。我对jQuery非常陌生，但这似乎是实现我所需的唯一方法，因为每个图像也是一个表单提交按钮。这可以在www.starcuts10.com/poems上看到

CSS:

jQuery：

$(document).ready(function() {
    var cont_left = $("#container").position().right;

    if ($('span').hasClass('horz')) {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "405",
                width: "638",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "250",
                width: "425",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });


        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    } 
    else {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "638",
                width: "405",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "425",
                width: "250",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });

        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    }
});

HTML:

您的jquery逻辑有问题

您不需要

if（“span.horz”）{..}else{..}

您需要做的是将悬停效果同时作用于：

$（“.horz输入”）

和

$（“.vert输入”）

而且，html是错误的。跨度应在TDs内

---

这是一把工作小提琴：

似乎你的html是错误的。首先，重写你的html代码并使用缩进使其更具可读性。你是一个救生员！我喜欢这个网站和每个人提供的帮助！非常感谢。我怎样才能给你一枚奖章或徽章或一些东西来感谢你的帮助呢？你不能给徽章，那会很好。您可以投票支持并将此评论标记为已回答

$(document).ready(function() {
    var cont_left = $("#container").position().right;

    if ($('span').hasClass('horz')) {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "405",
                width: "638",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "250",
                width: "425",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });


        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    } 
    else {
        $("input").hover(function() {
            // hover in
            $(this).parent().parent().css("z-index", 1);
            $(this).animate({
                height: "638",
                width: "405",
                right: "+=50",
                bottom: "+=150"
            }, "fast");
        }, 
        function() {
            // hover out
            $(this).parent().parent().css("z-index", 0);
            $(this).animate({
                height: "425",
                width: "250",
                right: "-=50",
                bottom: "-=150"
            }, "fast");
        });

        $(".img").each(function(index) {
            var right = (index * 160) + cont_left;
            $(this).css("right", right + "px");
        });
    }
});

<div id="container">
    <table>
        <tr>
            <span class="horz">
                <span class="vert">    
                    <td>
                        <form class="form_align" method ="post" action="#">
                            <a href=""><input type="image" src="http://starcuts10.com/images/blue_box.png" class="img"></a>
                            <input type="hidden" name="img" value="http://starcuts10.com/images/blue_box.png"> 
                            <input type="hidden" name="poem" value="">
                        </form>
                    </td>
                </span>
                <span class="vert">    
                <td>
                    <form class="form_align" method ="post" action="#">
                        <a href=""><input type="image" src="http://starcuts10.com/images/red_box.png" class="img"></a>
                        <input type="hidden" name="img" value="http://starcuts10.com/images/red_box.png"> 
                        <input type="hidden" name="poem" value="">
                    </form>
                </td>
            </span>  
        </tr>
    </table><br><br><br>
</div>