在div内部悬停时更改图像

Question

问

在div内部悬停时更改图像

三面D夏娃所_729 发布于 2023-01-19 12:13

DEMO LINK

正如你在上面的链接上看到的那样,我试图在鼠标悬停时更改图像,但它不能正常工作.我应该改变什么？父>已经有一个悬停在它上面.



.preview a img:hover{
    background-image:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Solid_yellow.svg/200px-Solid_yellow.svg.png');    
}

    
  




  
  
  

    

      

        Shay Elkayam..
         5
      
      
您正在尝试更改标记上的背景图像css .这不会改变"src"属性.为此,您需要一个JavaScript解决方案.

使用jQuery:

$(".preview a img").hover(function(){
    $(this).attr("src","new-image.jpg")
});


编辑:如果您正在使用CSS3,并且您可以并非所有浏览器都支持它,您可以执行以下操作:

.preview a img:hover{
    content:url("new-image.jpg");
}


编辑2:工作小提琴 - http://jsfiddle.net/j3xDR/

编辑3:由于请求它将通过父div工作,这里有两个选项的完整示例:

http://jsfiddle.net/j3xDR/1/



        
        1 个回答
        
                        
                您正在尝试更改<img>标记上的背景图像css .这不会改变"src"属性.为此,您需要一个JavaScript解决方案.

使用jQuery:

$(".preview a img").hover(function(){
    $(this).attr("src","new-image.jpg")
});


编辑:如果您正在使用CSS3,并且您可以并非所有浏览器都支持它,您可以执行以下操作:

.preview a img:hover{
    content:url("new-image.jpg");
}


编辑2:工作小提琴 - http://jsfiddle.net/j3xDR/

编辑3:由于请求它将通过父div工作,这里有两个选项的完整示例:

http://jsfiddle.net/j3xDR/1/

        
                
                    2023-01-19 12:15  回答
                       白云飞羽_389
                
            
                    
    
    
    
        撰写答案
        
            
                
                    回答问题...