如何更改鼠标悬停时的div背景图像？

发布于 2024-09-06 15:05:24 字数 980 浏览 8 评论 0原文

我有一些列表项，例如 -

<div class="smenu">
                <ul>
                  <li ><a href="index.html"><img src="images/solution1.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution2.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution3.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution4.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution5.jpg" border="0"></a></li>                   
                </ul>
              </div>

当用户移动菜单项时我想更改背景图像（如果 DIV） -

 <div class="hbg">
        <!--here I want to display image--> 
          </div>

我如何通过 jQuery 做到这一点？？？

原文

I have some set of list items like-

<div class="smenu">
                <ul>
                  <li ><a href="index.html"><img src="images/solution1.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution2.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution3.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution4.jpg" border="0"></a></li>
                  <li ><a href="#"><img src="images/solution5.jpg" border="0"></a></li>                   
                </ul>
              </div>

when user moves over the menu items I want to change the background image if DIV -

 <div class="hbg">
        <!--here I want to display image--> 
          </div>

how can I do this through jQuery???

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巷子口的你 2024-09-13 15:05:24

我假设您打算使用 li 下图像的 src。

$('.smenu li').mouseover( function(){
    var src = $(this).find('img').attr('src');
    $('.hbg').css('background-image', 'url(' + src + ')');
});

I assume you intend to use the src of the image under the li.

$('.smenu li').mouseover( function(){
    var src = $(this).find('img').attr('src');
    $('.hbg').css('background-image', 'url(' + src + ')');
});

回复收藏 0 原文

万水千山粽是情ミ 2024-09-13 15:05:24

你的意思是像下面这样？

$('.smenu li').bind('mouseover', function(){
  $('.hbg').css('background-image', 'new image');
});

You mean something like following?

$('.smenu li').bind('mouseover', function(){
  $('.hbg').css('background-image', 'new image');
});

回复收藏 0 原文

梦境 2024-09-13 15:05:24

使用 jquery 的 hover 函数

例如：

 $('.menuItem').hover( function(){ 
      $(this).css('background-image', 'image url'); 
   } );

use hover function of jquery

for example:

 $('.menuItem').hover( function(){ 
      $(this).css('background-image', 'image url'); 
   } );

回复收藏 0 原文

墟烟 2024-09-13 15:05:24

我管理了以下内容：

<!DOCTYPE html> 
<title>UL class change on li hover</title> 

<style> 
#list {
background-color:#dda;
width:10em;
height:20em;
}

#list li {
padding:2em .5em;
}
</style>  

<ul id="list">
<li class="one">Test 1</li>
<li class="two">Test 2</li>
<li class="three">Test 3</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script>
$(document).ready(function () {
    var defaultColor = $("#list").css("background-color");

    $("#list .one").hover(
        function () { 
            $(this).parent().css({backgroundColor: "red"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .two").hover(
        function () { 
            $(this).parent().css({backgroundColor: "green"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .three").hover(
        function () { 
            $(this).parent().css({backgroundColor: "blue"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );
});
</script>

重构它会很好，但只需将“颜色”替换为“图像”，它应该是一个可行的解决方案。

I managed the following:

<!DOCTYPE html> 
<title>UL class change on li hover</title> 

<style> 
#list {
background-color:#dda;
width:10em;
height:20em;
}

#list li {
padding:2em .5em;
}
</style>  

<ul id="list">
<li class="one">Test 1</li>
<li class="two">Test 2</li>
<li class="three">Test 3</li>
</ul>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script>
$(document).ready(function () {
    var defaultColor = $("#list").css("background-color");

    $("#list .one").hover(
        function () { 
            $(this).parent().css({backgroundColor: "red"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .two").hover(
        function () { 
            $(this).parent().css({backgroundColor: "green"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );

    $("#list .three").hover(
        function () { 
            $(this).parent().css({backgroundColor: "blue"});
        },
        function () { 
            $(this).parent().css({backgroundColor: defaultColor});
        }
    );
});
</script>

It would be nice to refactor this, but just replace the "color" with "image", and it should be a working solution.

回复收藏 0 原文

~没有更多了~