Question

我想要与本网站首页上的图片类似的悬停效果：http://www.arken.dk/default.aspx 我使用悬停效果制作了html和css，但由于悬停类一次仅应用于一个图像，因此位置的变化一次只能用于一个图像。据我所知，只要一个图像悬停，我就需要一些脚本来改变所有图像的css。此外，它不仅应该是悬停效果。在网站上，即使图像不再悬停，图像的位置仍保持不变？

任何人都知道如何做到这一点，或者可能有教程等链接？

我不确定这个效果是什么，所以我找不到任何有用的东西:(

提前致谢：）

Answer 1

工作示例：http://jsfiddle.net/SBpzX/2/

<div id="container">  
    <div class="text">one</div>
</div>

<强> JS

$(document).ready(function() {
    $('.text').hide();
    $('img').animate({
        opacity:1

    });

    $('img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
        $('.text').fadeIn();

    }, function() {
        $(this).stop().animate({opacity:1},500)
        $('.text').fadeOut();
    });


});

<强> CSS

img
{    
    position:absolute;
    left:0;
    top:0;
}

#container {
    width: 400px;
    height: 267px;
}

.text {
    color: black;
    position: relative;
    text-align: center;
    top: 50%;
    font-family: Arial, Verdana;
    color: #000;
    font-size: 5em;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
}

Answer 2

例如来自YUI库的一个组件：http://yuilibrary.com/gallery/show/accordion-horiz-vert

Answer 3

您可以使用jQuery Accordion执行此操作。

Answer 4

下载jquery并使用它......

$(#'image need to be hovered').mouseover(function()
{
  $(#'images need be be cahnged in this effect').attr('src','image path')
})

例如：将div的id设为img1，需要更改的图像为img1，img2，img3

考虑一下

$('#img1').mouseover(function()
    {
      $('#img1').attr('src','image path for hover image');
      $('#img2').attr('src','image path for hover image');
      $('#img3').attr('src','image path for hover image');
    });

和鼠标输出

 $('#img1').mouseout(function()
        {
          $('#img1').attr('src','image path for original image');
          $('#img2').attr('src','image path for original image');
          $('#img3').attr('src','image path for original image');
        });

悬停对图像的影响（jquery / javascript）

4 个答案: