1

下の画像のようなページを設定しようとしています。

http://i.stack.imgur.com/GwRXf.png

近くにリストされているリンクの1つ（テーブルまたはリスト）に「ホバー」して「クリック」動作を無効にしたときに、メイン画像を置き換えたいと思います。

私はこのコードに従ってcssでこれをやろうとしました：http： //jsfiddle.net/Kne3d/5/

私はそれをこのように変更しようとしました：

#gallery {
    oveflow: auto;
    text-align: center;
    padding: 1em;
    padding-top: 120px;
    position: relative;
}

#gallery td {
    display: inline;
    padding: 0 1em;
}

#gallery img {
    display: none;
    position: absolute;
    top: 10px;
    left: 35%;
}

#gallery td:hover {
    background: yellow;
}

#gallery td:hover ~ img {
    display: block;
}

と：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="gallery">
  <tr>
    <td width="100%">Cat 1<img src="/images/01.png"></td>
    <td width="150" rowspan="6">I WANT MY IMAGES HERE</td>
  </tr>
  <tr>
    <td>Cat 2 <img src="/images/02.png"></td>
  </tr>
  <tr>
    <td>Cat 3 <img src="/images/03.png"></td>
  </tr>
  <tr>
    <td>Cat 4<img src="/images/04.png">
</td>
  </tr>
</table>

画像を右の列に表示したいのですが...

私もJavascriptで試しました：

<head>
    <script language="JavaScript" type="text/JavaScript"> 
    function showT(q){ 
    document.getElementById('ima').setAttribute('src','0'+q+'.png') 
    } 
    </script>
</head>
<body>
    <table width="100%" border="0">
      <tr>
        <td width="80%"><p><a href="#" onmouseover="showT(0)">• Image 1</a></p>
          <p><a href="#" onmouseover="showT(1)">Image 2</a></p>
          <p><a href="#" onmouseover="showT(2)">Image 3</a></p>
          <p><a href="#" onmouseover="showT(3)">Image 4</a></p>
    <td width="20%"><img id="ima" src="images/00.png" width="150" height="150">
      </td>
      </tr>
    </table>
</body>

しかし...成功せずに：画像が表示されない:(

それがどのように機能するかについてのアイデアはありますか？

4

1 に答える 1

1

本当に簡単な方法：

$('#nav').find('li').hover(function(){
  $('#gallery').find('li').eq($(this).index()).toggle();
});

デモ

于 2013-01-13T17:24:49.623 に答える