css - 当悬停在不同的文本上时，中心的图像会发生变化

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 存储在标签中并在悬停时使用它

//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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" src="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" class="imgcenter" />
<table class="plantable" border=1>
    <tbody>
        <tr>
            <td style="color:#469785;"><a data-img="http://www.ucl.ac.uk/news/news-articles/1213/muscle-fibres-heart.jpg" href="">Type <b>E</b></a></td>
            <td style="color:#9BB8A0;"><a data-img="http://www.rodalesorganiclife.com/sites/rodalesorganiclife.com/files/images/animal_bird_300.jpg" href="">Type <b>F</b></a></td>
            <td style="color:#9DB77F;"><a data-img="https://sanaakosirickylee.files.wordpress.com/2012/05/chirping-birds.jpg" href="">Type <b>G</b></a></td>
            <td style="color:#9FA278;"><a data-img="http://img1.cookinglight.timeinc.net/sites/default/files/image/2005/09/0509p113-bird-m.jpg" href="">Type <b>G1</b></a></td>
            <td style="color:#C9AE77;"><a data-img="http://orig10.deviantart.net/6a53/f/2012/074/3/0/profile_picture_by_birds_love_us_all-d4sv1v2.jpg" href="">Type <b>H</b></a></td>
        </tr>
    </tbody>
</table>
</div>