Question

我正在处理图片标签，而不是<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被移出。我们如何实现这个，悬停，活动和我使用正则表达式来避免鼠标悬停在点击的图像上。

Answer 1

我不太清楚你想要什么，但试试这种方式而不是正则表达式：

<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();
    }
});

所以，这是正确的吗？：

state1 OR state3＆gt; mouseover＆gt; state2
state2＆gt; mouseout＆gt; state1
state3＆gt; mouseout＆gt; state2
state2＆gt;点击＆gt; state3
state3＆gt;点击＆gt; STATE2

图像选项卡jquery onclick和mouseout功能

1 个答案: