我正在处理图片标签,而不是<ul><li>
标签,
有图片a.png
和a-h.png
,-h
代表悬停图片。
我们有3张图像并排作为标签。
但是我用户mouseout
功能,点击功能就会消失,即活动标签的悬停被移除。
下面是html代码
<div class="container">
<div class="TabMenu">
<span><img src="images/a.png"></span>
<span><img src="images/b.png"></span>
<span><img src="images/c.png"></span>
</div>
</div>
以下是jQuery代码
$(".container .TabMenu span").mouseover(function(){
var myRegExp = /-h./;
var myRegExp2 = /-h-h./;
var str1 = $('img', this).attr('src');
var match = str1.search(myRegExp);
var match2 = str1.search(myRegExp2);
if(match == -1 ){
var newSrc = $('img', this).attr('src').replace(".", "-h.");
$('img', this).attr("src", newSrc);
}
else if(match2 == -1){
var newSrc = $('img', this).attr('src').replace("-h-h.","-h.");
$('img', this).attr("src", newSrc);
}
});
$(".container .TabMenu span").mouseout(function(){
var myRegExp = /-h./;
var myRegExp2 = /-h-h./;
var str1 = $('img', this).attr('src');
var match = str1.search(myRegExp);
var match2 = str1.search(myRegExp2);
if(match != -1){
var newSrc = $('img', this).attr('src').replace("-h.", ".");
$('img', this).attr("src", newSrc);
}
else if(match2 != -1){
var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
$('img', this).attr("src", newSrc);
}
});
$(".container .TabMenu span").click(function(){
var myRegExp2 = /-h./;
var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
$('img', this).attr("src", newSrc);
});
$(".container .TabMenu span").click(function(){
var myRegExp2 = /-h./;
var newSrc = $('img', this).attr('src').replace("-h-h.", "-h.");
$('img', this).attr("src", newSrc);
});
});
当我将鼠标悬停在点击的图像上然后移出点击的图像时,图像的活动阶段即-h
被移出。
我们如何实现这个,悬停,活动和我使用正则表达式来避免鼠标悬停在点击的图像上。
答案 0 :(得分:0)
我不太清楚你想要什么,但试试这种方式而不是正则表达式:
<div class="container">
<div class="TabMenu">
<span><img class="state1" src="images/a.png"><img class="state2" style="display:none;" src="images/a-h.png"><img class="state3" style="display:none;" src="images/a-h-h.png"></span>
<span><img class="state1" src="images/b.png"><img class="state2" style="display:none;" src="images/b-h.png"><img class="state3" style="display:none;" src="images/b-h-h.png"></span>
<span><img class="state1" src="images/c.png"><img class="state2" style="display:none;" src="images/c-h.png"><img class="state3" style="display:none;" src="images/c-h-h.png"></span>
</div>
</div>
和jQuery:
$(".container .TabMenu span").live("mouseover", function(){
$(this).find("img").hide();
$(this).find("img.state2").show();
});
$(".container .TabMenu span").live("mouseout", function(){
if($(this).find("img:visible").hasClass("state2")){
$(this).find("img").hide();
$(this).find("img.state1").show();
}
else if($(this).find("img:visible").hasClass("state3")){
$(this).find("img").hide();
$(this).find("img.state2").show();
}
});
$(".container .TabMenu span").live("click", function(){
if($(this).find("img:visible").hasClass("state2")){
$(this).find("img").hide();
$(this).find("img.state3").show();
}
else if($(this).find("img:visible").hasClass("state3")){
$(this).find("img").hide();
$(this).find("img.state2").show();
}
});
所以,这是正确的吗? :