Css 菜单和标题

有一个菜单栏和一个标题。 我希望不同的菜单项更改标题图像

无悬停->默认标题图像

菜单1悬停->更改标题图像1

菜单2悬停->更改标题图像2

菜单3悬停->更改标题图像3

我使用photoshop创建：

对不起，英语很差。。。

---

我在等待答案

您必须将标题图像放在菜单中。然后你可以这样做：

.menu1:hover div.header1 {
       background-image:url(/header2.jpg);

 }

$(document).ready(function () {
    // #menu is the id of either the container div or the ul
    $('#menu li').hover(
        function() {
            var index = $('#menu li').index(this);
            //#header is the ID of your header image
            $('#header').attr('src','../imgs/your_image_name'+index+'.jpg');

      },
      function() {
            $('#header').attr('src','../imgs/your_image_name.jpg');
      }
}):

---

也许可以使用jquery？大概是这样的：

.menu1:hover div.header1 {
       background-image:url(/header2.jpg);

 }

$(document).ready(function () {
    // #menu is the id of either the container div or the ul
    $('#menu li').hover(
        function() {
            var index = $('#menu li').index(this);
            //#header is the ID of your header image
            $('#header').attr('src','../imgs/your_image_name'+index+'.jpg');

      },
      function() {
            $('#header').attr('src','../imgs/your_image_name.jpg');
      }
}):