0

好的，所以我尝试将 .addclass 和 removeclass 与 CSS 结合使用以在鼠标悬停时放大图像，但在鼠标离开时将其返回给移动器。我知道我可以纯粹在 Jquery 中做到这一点，也可以纯粹在 css 中做到这一点，但出于这个 excersize 的目的，我试图同时使用这两者

它不适用于我现在拥有的东西，我对转换和转换属性有点困惑，我可能写错了。我不确定这是否是一个问题，但我使用的是 960 12 col 网格样式表

编辑：与我在下面的评论相反，我只是将过渡从一个班级转移到另一个班级。这不能正常工作，向 .image 和 scale_image 添加兼容的浏览器（转换：transform 5s;）提供了所需的效果

演示

  <!doctype html>
   <html>
<head>
    <meta charset="UTF-8">
    <link href="stylesheets/960_12_col.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <style>
        body {
            font-size:62.5%;
            background:url('images/vintageocean.jpg')no-repeat repeat                 center fixed;
        }
        #gallery {
            padding-top:1em;
        }   

        .image {
            width:25em;
            height: 20em;
            transition: transform 5s;

            }
        .first_row {
            margin-bottom:15em;
        }   

        .scale_img {
        transform: scale(2);
        -webkit-transform: scale(2);
        -o-transform: scale(2);
        -moz-transform: scale(2);
                     transition: transform 5s;
       }

    </style>

    <script>
    $(document).ready(function() {

    $(".image").mouseenter(function() {
        $(this).addClass("scale_img");
    });

        $(".image").mouseleave(function() {
            $(this).removeClass("scale_img");
        });
    });



    </script>
</head>
<body>
    <div id="wrapper" class="container_12">
        <header>
            <h1> Scaling </h1>
        </header>
        <div id="galleryheader">
            <h2> Albums<h2>
        </div>
        <section id="gallery">          
            <img id="avery" class=" image first_row prefix_2 grid_3 suffix_1" src='images/OAI.jpg' alt= "On Avery Island Album Art">
            <img id="overthesea" class=" image first_row prefix_1 grid_3 suffix_2" src='images/ITAOTS.jpg' alt="In the Aeroplane Over the Sea album art">   
            <img id="beauty" class=" image second_row prefix_2 grid_3 suffix_1" src='images/beauty.jpg' alt="Beauty Demo Album Art">
            <img id="everthingIs" class=" image second_row prefix_1 grid_3 suffix_2" src='images/everythingis.jpg' alt="Eveything Is EP Album Art">
        </section>
    </div>  
</body>

4

1 回答 1

1

当引用一个 CSS 类时，.image不要image像这样写：

$(document).ready(function() {

    $(".image").mouseenter(function() {
        $(this).addClass("scale_img");
    });

        $(".image").mouseleave(function() {
            $(this).removeClass("scale_img");
        });
    });
于 2013-10-29T07:24:18.247 回答