Javascript 如何在div中创建img的平滑鼠标悬停

我想让我的img.icon\u缩放（第4行）只在鼠标悬停时出现。这个图像将是我想要获得的效果。因此，一旦客户端用鼠标悬停，图标将慢慢淡入。后面的图片是一个链接，单击该链接将打开一个dropbox，其链接通过class=“piczoom”。我该怎么做

这是我的实际代码。前4行中有趣的部分：

<div id="tab1">
                    <div class="usual">
                        <a class="piczoom" href="_img/prensa/DOC2.jpg"><img alt="" src="./_img/prensa/photo_zoom.jpg"  class="photo_zoom" /></a>
                        <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
                    </div>

                    <article>
                        <p class="p_title1"><img src="./_img/prensa/medio.png" alt="" /></p>
                        <img class="under1" src="./_img/prensa/underline.png" alt="" />
                        <p class="p_text">Revista la Moraleja</p>
                        <br>
                        <br>
                        <p class="p_title2"><img src="./_img/prensa/description.png" alt="" /></p>
                        <img class="under2" src="./_img/prensa/underline.png" alt="" />
                        <p class="desc_txt" class="p_text">Entrevista realizada por Antonio Corales. Visitaron el estudio mientras se realizaba los preparativos previos a la exposicion de Santander. Esta entrevista fue publicado en las tres primera paginas de la revista. hola
                        </p>
                        <br>
                        <div class="quote_box">
                            <img class="quote_left" src="./_img/prensa/quote.left.png" alt="" />
                            <p class="quote">Sus colores y textura te imnotizanaran</p>
                            <img class="quote_right" src="./_img/prensa/quote.right.png" alt="" />
                        </div>
                    </article>
                </div>

《道德评论》






安东尼奥·科拉莱斯的作品。参观桑坦德展览馆前的准备工作。这是一个公共场所，它是最早的公共场所。你好



Sus颜色和纹理

---

这是一个期末项目，所以我非常感谢

由于您希望平滑，您可能希望预加载图像，因此请添加到您的css

div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
}

在html的底部

<div id="preloaded-images">
    <img src="path/to/my-image.png" width="1" height="1" alt="" />
</div>

---

因为你想要平滑，你可能想预加载你的图像，所以添加到你的css

div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px; 
    top: -9999px;
    height: 1px;
    width: 1px;
}

在html的底部

<div id="preloaded-images">
    <img src="path/to/my-image.png" width="1" height="1" alt="" />
</div>

---

最后，我用我得到的答案找到了我的答案。谢谢大家

我创建了一个代码，这样一旦加载页面，图标就会非常缓慢地淡出，如果鼠标悬停，那么悬停淡出和淡出就会开始工作。这是我给好奇的人的代码，谢谢

<script type="text/javascript">
        /*JQ Fancybox for zoom foto*/
        $(document).ready(function() {
            $("a.piczoom").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            /*JQ to fade in on load*/
            $('.icon_zoom').hide().fadeIn(3000);

            /*JQ after load to work with hover*/
            $('.pic_zoom_box').hover(function () {
                $('.icon_zoom').fadeIn('slow', function() {});
            }, 
            function () {
                $('.icon_zoom').fadeOut('slow', function() {});
            });

        });
        </script>

<div class="pic_zoom_box" class="usual">
                            <a class="piczoom" href="_img/prensa/2_Cutted_zoom/diario_montanes/el_diario_Montanes.jpg">
                                <img alt="" src="_img/prensa/3_Cutted_preview/diario_montanes/el_diario_montanes.jpg"  class="photo_zoom" />
                                <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
                            </a>
                        </div>

/*用于缩放foto的JQ Fancybox*/
$（文档）.ready（函数（）{
$（“a.piczoom”）.fancybox({
“叠加显示”：错误，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”
});
/*JQ将在加载时淡入*/
$（'.icon_zoom'）.hide（）.fadeIn（3000）；
/*JQ加载后使用悬停工作*/
$（'.pic\u缩放框'）。悬停（函数（）{
$（'.icon_zoom'）.fadeIn（'slow'，function（）{}）；
}, 
函数（）{
$（'.icon_zoom'）.fadeOut（'slow'，function（）{}）；
});
});

最后，我用我得到的答案找到了我的答案。谢谢大家

我创建了一个代码，这样一旦加载页面，图标就会非常缓慢地淡出，如果鼠标悬停，那么悬停淡出和淡出就会开始工作。这是我给好奇的人的代码，谢谢

<script type="text/javascript">
        /*JQ Fancybox for zoom foto*/
        $(document).ready(function() {
            $("a.piczoom").fancybox({
                'overlayShow'   : false,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic'
            });

            /*JQ to fade in on load*/
            $('.icon_zoom').hide().fadeIn(3000);

            /*JQ after load to work with hover*/
            $('.pic_zoom_box').hover(function () {
                $('.icon_zoom').fadeIn('slow', function() {});
            }, 
            function () {
                $('.icon_zoom').fadeOut('slow', function() {});
            });

        });
        </script>

<div class="pic_zoom_box" class="usual">
                            <a class="piczoom" href="_img/prensa/2_Cutted_zoom/diario_montanes/el_diario_Montanes.jpg">
                                <img alt="" src="_img/prensa/3_Cutted_preview/diario_montanes/el_diario_montanes.jpg"  class="photo_zoom" />
                                <img class="icon_zoom" src="_img/prensa/icon.zoom.png" alt="zoom" />
                            </a>
                        </div>

/*用于缩放foto的JQ Fancybox*/
$（文档）.ready（函数（）{
$（“a.piczoom”）.fancybox({
“叠加显示”：错误，
“transitionIn”：“弹性”，
“transitionOut”：“弹性”
});
/*JQ将在加载时淡入*/
$（'.icon_zoom'）.hide（）.fadeIn（3000）；
/*JQ加载后使用悬停工作*/
$（'.pic\u缩放框'）。悬停（函数（）{
$（'.icon_zoom'）.fadeIn（'slow'，function（）{}）；
}, 
函数（）{
$（'.icon_zoom'）.fadeOut（'slow'，function（）{}）；
});
});

您尝试过什么？您还应该发布您试图用来创建效果的javascript或css。祝你好运，如果你有问题，请告诉我们！只是一个提示，尽量避免说“我该怎么做”和过多的标点符号。虽然你发布了一些代码很好，但是说你尝试过的也会很有用。你尝试过什么？您还应该发布您试图用来创建效果的javascript或css。祝你好运，如果你有问题，请告诉我们！只是一个提示，尽量避免说“我该怎么做”和过多的标点符号。虽然你发布了一些代码很好，但说你尝试过的东西也会很有用。@BrettThomas虽然这是一个好信息，但我通常认为最好发布这些信息来帮助OP，而不是在做作业时给他们代码。虽然你确实回答了这个问题，但这对帮助这个人学习并没有多大帮助。只是我的意见，但我想我会把它说出来。@Jared我绝对同意，尽管我确实确定我没有给他一个他发布的HTML的确切答案。@DanielRamirez Escudero介意给我答案点吗，因为我给你的答案似乎是你需要解决的问题？谢谢。@BrettThomas虽然这是一个很好的信息，但我通常认为最好发布这些信息来帮助OP，而不是在作业时给他们代码。虽然你确实回答了这个问题，但这对帮助这个人学习并没有多大帮助。只是我的意见，但我想我会把它说出来。@Jared我绝对同意，尽管我确实确定我没有给他一个他发布的HTML的确切答案。@DanielRamirez Escudero介意给我答案点吗，因为我给你的答案似乎是你需要解决的问题？谢谢