CSS - 如何解决悬停？

-2

我需要更改id=main_touch当某人悬停在class=buttontptCSS - 如何解决悬停？

以下方式悬停不起作用的背景图像。

<style> 
    #main_touch { 
     background: url(custom12/<?=$this->mylanguage;?>.jpg) 0 0 no-repeat; 
    } 
    #main_touch:hover { 
     background: url(custom12/<?=$this->mylanguage;?>.hover.jpg) 0 0 no-repeat; 
    }  
</style> 

<img src="custom12/<?=$this->mylanguage;?>.jpg" width="1024" height="768" border="0" usemap="#map" id="main_touch" />   
    <map name="map"> 
     <area shape="rect" coords="26,72,405,194" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,240,405,362" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,403,405,525" nohref="nohref" class="buttontpt" /> 
     <area shape="rect" coords="26,555,405,677" nohref="nohref" class="buttontpt" /> 
    </map>

来源

2014-09-28 YumYumYum

我想在CSS悬停图像的名称是错误的（错误）的股利，它.hover.jpg结束，也许改成hover.jpg已经解决了它（基于hover.jpg的名字）。 – 2014-09-28 11:07:47

我不认为图像有背景。它有一个源（src）。 – melancia 2014-09-28 11:13:05

但是，如果你仍然想保留一个无效的HTML标记，删除'img'' src'，然后它将工作：http://jsfiddle.net/e2jfytzs/ – melancia 2014-09-28 11:15:13

使用jQuery，这是很容易：

$(document).ready(function() { 

    $(".buttonpt").mouseover(function() { 
     $("#main_touch").attr("src", "path/to/other/image"); 
    }); 

    $(".buttonpt").mouseout(function() { 
     $("#main_touch").attr("src", "path/to/original/image"); 
    } 
});

使用纯CSS，这是一个有点棘手。如果要在.buttonpt悬停时更改#main_touch的背景，则需要确保#main_touch图像在HTML中的.buttonpt后出现。

然后，你可以做这样的事情：

.buttonpt:hover ~ #main_touch { 
    background: url("path/to/other/image"); 
}

来源

2014-09-28 11:16:03

你的形象有一个src。你应该删除它，并只做背景和div。不要使用无效的HTML！然后你可以定位你喜欢的地方：

#first { 
 
     background: url(http://lorempixel.com/400/200/) 0 0 no-repeat; 
 
     width:400px; 
 
     height:200px; 
 
    } 
 
    #second:hover #first{ 
 
     background: url(http://lorempixel.com/600/200/) 0 0 no-repeat; 
 
    }


 
<div id="second">hover on it to change it 
 
<div id="first"><div> 
 
</div>

来源

2014-09-28 11:20:46

CSS - 如何解决悬停？

回答

相关问题