Question

我正在建立一个关于物业计划的网站，我的客户要求当他们的客户悬停在文本上时，中心的图像会发生变化，是否有任何方法只能使用css？

<div>
<img src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter">
<table class="plantable">
    <tbody>
        <tr>
            <td style="color:#469785;"><a href="">Type <b>E</b></a></td>
            <td style="color:#9BB8A0;"><a href="">Type <b>F</b></a></td>
            <td style="color:#9DB77F;"><a href="">Type <b>G</b></a></td>
            <td style="color:#9FA278;"><a href="">Type <b>G1</b></a></td>
            <td style="color:#C9AE77;"><a href="">Type <b>H</b></a></td>
        </tr>
    </tbody>
</table>
</div>

当用户悬停在E型时，imgcenter将变为图像E，当用户将鼠标悬停在G型时，imgcenter将变为图像G，我该怎么做？

以下是我找到的可以使用的解决方案

http://fiddle.jshell.net/tbz9nL4g/

<style>
    .hover_image {position:relative;}
    .hover_image .img1{position:absolute; display:none; z-index:99;}
    .hover_image:hover .img1{display:block;}
    .hover_image .img2{position:absolute; display:block; z-index:99;}
    .hover_image:hover .img2{display:none;}
</style>

<div>
    <a href="#" class="hover_image"> link text 
        <span class="img1"><img src="http://www.imagingshop.com/images/sharptone/hdr-2.jpg" /></span>
        <span class="img2"><img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
        </span>
    </a>
</div>

但是这个编码存在一些问题，当我添加另一个文本时，这段代码无法正常工作 http://fiddle.jshell.net/tbz9nL4g/2/

Answer 1

使用data属性将data-img存储在标记中，并在悬停时使用

minSdkVersion="MNC"

//js
$('a').hover(function(e){
    if(e.type==='mouseenter' || e.type==='mouseover'){
      $('.imgcenter').prop({'src':$(this).data('img')});
    }else if(e.type==='mouseleave'){
      $('.imgcenter').prop({'src':$('.imgcenter').data('img')});
    }
})

img{width:300px;height:300px;}

当悬停在不同的文本时，中心的图像将会改变

1 个答案: