1

私は次のコードを持っています：

<div class="container">
   // some other code
   <ul>
      <li><a href="#about">about</a></li>
      <li><a href="#service">service</a></li>
      <li><a href="#contact">contact</a></li>
   </ul>
</div>

<a>リンクはボタンとしてスタイル設定されています。
リンクをホバリングする<a>と、container-div に背景画像が追加されます。しかし、それぞれに<li>独自のイメージがあります。したがって、「about」リンクにカーソルを合わせると、コンテナ div は「about」画像になります。「サービス」リンクにカーソルを合わせると、コンテナ div が「サービス」イメージを取得します。

どうすればそれを達成できますか？

私がすでに試したこと：
.container ul li a:hover .container{ background-image: url('path/to/image) }
.container ul li a:hover > .container{ background-image: url('path/to/image) }
.container ul li a:hover ~ .container{ background-image: url('path/to/image) }
.container ul li a:hover + .container{ background-image: url('path/to/image) }

CSSだけでは無理な場合、JavaScript/jQueryで方法はありますか?

4

3 に答える 3

1

CSSだけでは無理だと思います

<div class="container">// some other code
    <ul>
        <li>
            <a href="#about" data-type="about">about</a>
        </li>
        <li>
            <a href="#service" data-type="service">service</a>
        </li>
        <li>
            <a href="#contact" data-type="contact">contact</a>
        </li>
    </ul>
</div>

それから

.container.about{
    background-image: url(...)
}

と

jQuery(function ($) {
    $('.container li a').hover(function () {
        $('.container').addClass($(this).data('type'))
    }, function () {
        $('.container').removeClass($(this).data('type'))
    })
})

デモ:フィドル

于 2013-10-08T07:00:58.837 に答える
0 
<div class="container">
   // some other code
   <ul>
      <li><a href="#about" id="1">about</a></li>
      <li><a href="#service" id="2">service</a></li>
      <li><a href="#contact" id="3">contact</a></li>
   </ul>
</div>




$(document).ready(function() {

    $('#1').hover(function(){
    $('.container').css("background","url(images/pic1.jpg)");  
}, function () {
     $('.container').css("background","'none'");  
});
    $('#2').hover(function(){
    $('.container').css("background","url(images/pic2.jpg)");  
}, function () {
     $('.container').css("background","'none'");  
});
    $('#3').hover(function(){
    $('.container').css("background","url(images/pic3.jpg)");  
}, function () {
     $('.container').css("background","'none'");  
});

 });
于 2013-10-08T07:02:42.000 に答える