用鼠标在缩略图div内控制一个背景图像的问题

问题描述：

对不起，如果这是一个相当常见的问题，但我向你保证我已经花了最后两天阅读，看看我是否可以自己解决，但唉，我在你身边，希望得到一些建议。我仍处于学习javascript的初级阶段。用鼠标在缩略图div内控制一个背景图像的问题

基本上，我有一个div类包含的一系列缩略图，有一个重复的背景图像给它一个微妙的纹理。我也有一些java脚本，当鼠标悬停在缩略图图像上时，它成功突出显示单个div容器的蓝色。我遇到的问题是，纯蓝色效果与我为缩略图div选择的现有背景图片无法很好地啮合。在蓝色悬停效果发生的时候，我一直试图切换背景图片的开启/关闭，但是我只能在单个鼠标悬停/悬停之后将其关闭。

这里的JavaScript：

// this controls the entire div tag and turns it blue 
$('.pGrid div a').hover(
    function(){ 
     //this if-statement should toggle whether or not the striped background shows when the mouse is hovering 
     if ($('.pGrid div a').hover !=0) { 
     $('.pGrid div a').parent().css({ backgroundImage: "none" }); 
     } 
     else { 
     $('.pGrid div a').parent().style({ backgroundImage: "url('../images/background_stripes_white.gif')" });  
      } 
     //mouse over turn div blue 
     $(this).parent().stop().animate({ 
      backgroundColor: "#006699", 
      color: "#ffffff" 
      }, 350);  
      // this controls the word-highlight part 
     $(this).stop().animate({ 
      backgroundColor: "#006699", 
      color: "#ffffff" 
      }, 350); 
     }, 
     // mouse out 
    function(){ 
     $(this).parent().stop().animate({ 
      backgroundColor: "#d0d0d0", 
      color: "#000000" 
      }, 350); 
     $(this).stop().animate({ 
      backgroundColor: "#d0d0d0", 
      color: "#006699" 
      }, 350); 
     });

答

而不是更改背景图片，只要将CSS类名。有一个与形象和一个没有。

您应该也可能在您的A-tag上使用display:block并直接应用背景（通过CSS类）而不是父项。

我需要用toggleClass创建一个新的函数吗？或者我仍然可以使用if-else语句来完成此操作？ – bobs 2013-02-21 23:31:04

您可以使用toggleClass或addClass/RemoveClass，最适合您的代码模式。 – 2013-02-22 14:44:36

答

问题已解决。我不得不nix if-else语句，并在每个函数中放置一行代码，说明将背景设置为none或切换回原始。另外，事实证明我所引用的文件扩展名都是错误的，不得不删除'../'部分。谢谢@Diodeus的帮助，非常感谢！

用鼠标在缩略图div内控制一个背景图像的问题

相关推荐