单击使用jQuery时保持图像悬停按钮

我使用以下代码在将鼠标悬停在按钮图像上时提供悬停效果：

 $("img.hoverImage")
    .mouseover(function () {
        var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
        $(this).attr("src", src);
    })
    .mouseout(function () {
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    });

这很有效。我现在有一个额外的要求：

我一行有三个按钮，它们都有class=“hoverImage”

我仍然想保留这个悬停效果，但现在我还想更改它，这样当我单击一个图像时，它会保持悬停图像的显示（即使当我将鼠标移出该图像时）。当我单击另一个按钮时，它应该会从其他按钮中删除悬停

注意：单击图像链接不会重定向到新页面（它们只是从js文件调用一些ajax）

扩展下面的代码以支持jQuery的最佳方式是什么？似乎我需要在单击项目后禁用mouseout处理程序，但我试图避免使用复杂的解决方案

$("img.hoverImage").click(function() {
    $(this).removeClass("hoverImage").addClass("keepImage");
    $(this).siblings("img.keepImage").removeClass("keepImage").addClass("hoverImage");
});

基本上，您可以在单击时删除hoverimage类及其功能，从而使鼠标移出时不会发生mouseout事件。它还将hoverImage类还原为所有同级

不过，您可能仍然需要在我的单击处理程序中恢复同级上的非悬停图像

编辑：我为您制作了一个JSFIDLE，并采用了不同的方法：

基本上，您可以使用类hoverImage创建一些链接，如下所示：

<a class="hoverImage"> </a>

然后，创建一个CSS属性，当它们悬停时，当它们具有类“keepImage”时，该属性将为它们提供一个新的背景图像：

当然，如果您想要不同的图片，您必须为每个链接创建一个唯一的链接

最后，制作一个JQuery的小片段，在单击它们时将类keepImage添加到它们中，并从拥有该类的任何同级中删除该类：

$("a.hoverImage").click(function() {
    $(this).siblings(".keepImage").removeClass("keepImage");
    $(this).addClass("keepImage");
});

如果您想让它在更广泛的范围内工作，而不仅仅是一组同级，比如说，页面范围，只需替换这个：

$(this).siblings(".keepImage")

为此：

$(".keepImage")

祝你好运

使用jquery&

---

如果你的链接没有改变窗口的位置，你可以继续安德烈亚斯的回答或类似的东西。如果他们这样做了，它看起来更像是服务器端脚本的工作。我不知道您使用的是哪一个，所以我将发布一个php示例

---

我认为如果您使用带有图像的“div”作为背景会更容易。指定与背景图像相同的div宽度和高度并应用它。 这尤其适用于您使用这些图像作为占位符供某人单击的情况

更改后，指定：悬停CSS修复。 您的新要求与识别当前活动映像有关。 为此,

     $("<<placeholder - selector>>").click(function(){
           $(this).addClass("active").siblings().removeClass("active");

     });

$（“”）。单击（函数（）{
$（this）.addClass（“活动”）.sides（）.removeClass（“活动”）；
});

---

如果活动类已存在于同级中，则将删除该类并高亮显示当前类。希望这能解决问题

以下是关于如何实现目标的示例代码：

javascript代码：

$("img.hoverImage").mouseover(function() {

    var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
    $(this).attr("src", src);

    // add class to state the element is hovered
    $(this).addClass('hover');
}).mouseout(function() {
    // don't trigger this function if element has clicked state
    if ($(this).hasClass('click')) {
        return;
    }

    var src = $(this).attr("src").replace("_hover", "");
    $(this).attr("src", src);

    // remove hover class
    $(this).removeClass('hover');
}).click(function(e) {
    // disable the default click event
    e.preventDefault();

    $(this).parent()              // from the parent element
           .siblings()            // find all the siblings elements <a>'s
           .find('img')           // find <img> inside each sibling
           .removeClass('hover')  // remove hover class
           .removeClass('click'); // remove click class

    // trigger the mouse over event for the image tag
    $(this).addClass('click').trigger('mouseover');
});

$（“img.hoverImage”）.mouseover（函数（）{
var src=$（this.attr（“src”）.match（/[^\.]+/）+“_hover.png”；
$（this.attr（“src”，src）；
//添加类以声明元素处于悬停状态
$（this.addClass（'hover'）；
}).mouseout（函数（）{
//如果元素已单击状态，则不触发此函数
if（$（this）.hasClass（'click'））{
返回；
}
var src=$（this.attr（“src”）.replace（“_hover”，”）；
$（this.attr（“src”，src）；
//移除悬停类
$（this.removeClass（'hover'）；
})。单击（功能（e）{
//禁用默认的单击事件
e、 预防默认值（）；
$（this）.parent（）//来自父元素
.sides（）//查找所有同级元素的
.find（'img'）//在每个同级中查找
.removeClass（'hover'）//删除hover类
.removeClass（'click'）；//删除click类
//触发图像标记的鼠标悬停事件
$（this）.addClass（'click'）.trigger（'mouseover'）；
});

---

希望这能有所帮助

为了可读性，我将事件处理程序的工作方式引入函数中。这可能需要在生产代码中进行一些清理，但对于这种大小的东西来说，这是一个次要问题

当单击一个元素时，它将获得类“isClicked”，其余元素将其删除。所有匹配元素都传递给unHover函数。unHover函数与mouseout处理程序相同，只是它只适用于缺少isClicked类的元素

$("img.hoverImage")
    .mouseover(function () {
        makeHoverImage(this);
    })
    .mouseout(function () {
        unHoverImage(this);
    })
    .click(function(){
        makeActive(elem);
    });

function makeActive(elem){
    $("img.hoverImage").removeClass("isClicked");
    $(elem).addClass("isClicked");
    $("img.hoverImage").each(function(index,elem){
        unHoverImage(elem);
    });
}

function makeHoverImage(elem){
    var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
    $(this).attr("src", src);
}

function unHoverImage(elem){
    if (!$(elem).hasClass("isClicked")){
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    }
}

---

我将设置一个全局字符串来存储当前图像src。然后在mouseout函数中使用它来测试当前图像是否已被单击，如果已被单击，则跳过通常的mouseout过程

鼠标单击时，函数将查找src为

currentImage

的图像，在找到

currentImage

变量后重置该变量（允许mouseout函数正确运行）并手动执行mouseout。然后将

currentImage

变量设置为image src（如上所述）

这个解决方案也很方便，因为它适合您的队列，对JS的影响最小，对CSS和HTML没有影响

查看下面的代码，如果您有任何问题，请告诉我：）

---

谢谢！：）

我个人会做很多改变：

首先，我不会依赖于交换文件名块的逻辑。您可能希望在以后更改约定，而不希望在JavaScript中进行彻底的修改。我会按照以下思路做一些事情：

<img src="/Content/Images/1.png"
     data-active-image="/Content/Images/1_hover.png" />

它从事件代码中接受一个布尔值来表示鼠标是否在上面。它检查元素是否具有活动类。如果它有活动类，或正处于悬停状态，则为

true

。我们使用它来选择要使用的源。下一位用于在

数据非活动图像

属性中缓存原始源。最后

     $("<<placeholder - selector>>").click(function(){
           $(this).addClass("active").siblings().removeClass("active");

     });

$("img.hoverImage").mouseover(function() {

    var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
    $(this).attr("src", src);

    // add class to state the element is hovered
    $(this).addClass('hover');
}).mouseout(function() {
    // don't trigger this function if element has clicked state
    if ($(this).hasClass('click')) {
        return;
    }

    var src = $(this).attr("src").replace("_hover", "");
    $(this).attr("src", src);

    // remove hover class
    $(this).removeClass('hover');
}).click(function(e) {
    // disable the default click event
    e.preventDefault();

    $(this).parent()              // from the parent element
           .siblings()            // find all the siblings elements <a>'s
           .find('img')           // find <img> inside each sibling
           .removeClass('hover')  // remove hover class
           .removeClass('click'); // remove click class

    // trigger the mouse over event for the image tag
    $(this).addClass('click').trigger('mouseover');
});

$("img.hoverImage")
    .mouseover(function () {
        makeHoverImage(this);
    })
    .mouseout(function () {
        unHoverImage(this);
    })
    .click(function(){
        makeActive(elem);
    });

function makeActive(elem){
    $("img.hoverImage").removeClass("isClicked");
    $(elem).addClass("isClicked");
    $("img.hoverImage").each(function(index,elem){
        unHoverImage(elem);
    });
}

function makeHoverImage(elem){
    var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
    $(this).attr("src", src);
}

function unHoverImage(elem){
    if (!$(elem).hasClass("isClicked")){
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    }
}

var currentImage = "0";

$("img.hoverImage")
.click(function(){
    $("img.hoverImage").each(function() {
        if($(this).attr("src")==currentImage){
            currentImage = "0";
            $(this).mouseout();
        }
    });
    currentImage = $(this).attr("src");
})
.mouseover(function () {
    var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
    $(this).attr("src", src);
})
.mouseout(function () {
    if($(this).attr("src") != currentImage){
        var src = $(this).attr("src").replace("_hover", "");
        $(this).attr("src", src);
    }
});

<img src="/Content/Images/1.png"
     data-active-image="/Content/Images/1_hover.png" />

<img src="/Content/Images/1.png"
     data-active-image="/Content/Images/1_hover.png"
     data-hover-image="/Content/Images/1_hover.png"
     data-disabled-image="/Content/Images/1_hover.png" />

$.fn.updateImage = function(hovering) {
    return this.each(function() {
        var $el = $(this);
        var active = (hovering || $el.hasClass('active'));

        var image = active ? 'activeImage' : 'inactiveImage';

        if(!$el.data('inactiveImage'))
            $el.data('inactiveImage', $el.attr('src'));

        $el.attr('src', $el.data(image));
    });
};

$.fn.makeHoverGroup = function() {
    var $group = this;

    return this
        .mouseover(function() {
            $(this).updateImage(true);
        })
        .mouseout(function() {
            $(this).updateImage(false);
        })
        .click(function() {
            $group.not(this).removeClass('active').updateImage(false);
            $(this).addClass('active').updateImage(true);
        });
};

$('.hoverImage').makeHoverGroup();

$("img.hoverImage").mouseover(function(){
  if ($(this).is('.activeImage')) return;
  var src = $(this).attr("src").match(/[^\.]+/) + "_hover.png";
  $(this).attr("src", src);
}).mouseout(function(){
  if ($(this).is('.activeImage')) return; // Skip mouseout for active image
  var src = $(this).attr("src").replace("_hover", "");
  $(this).attr("src", src);
}).click(function(){
  // remove previous active state
  $('.activeImage').not(this).removeClass('activeImage').trigger('mouseout');
  // set new active state
  $(this).addClass('activeImage');
  return false;
});

if <triggered from current> return;   // disabling check    

if <there is a current> current.trigger('mouseout');
<set new current>
current.trigger('mouseover')

<a id="anchor1" class="imageLink" ><img class="hoverImage" src="images/1.png"/></a>
<a id="anchor2" class="imageLink" ><img class="hoverImage" src="images/2.png"/></a>
<a id="anchor3" class="imageLink" ><img class="hoverImage" src="images/3.png"/></a>

<script type="text/javascript">
$(function() {
    var clickedImg = null; // this is common to all closures below
    $("img.hoverImage")
        .mouseover(function () {
            var $img = $(this);
            if ($img.get(0) == clickedImg) return;
            // note the improved matching !
            var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png"; 
            $img.attr("src", src);
        })
        .mouseout(function () {
            var $img = $(this);
            if ($img.get(0) == clickedImg) return;
            var src = $img.attr("src").replace("_hover","");
            $img.attr("src", src);
        });
         $("a.imageLink").click(function() {
            var oldClicked = clickedImg;
            clickedImg = null;                         // set to null to trigger events
            if (oldClicked) $(oldClicked).mouseout();
            var newClicked = $(this).find('img').get(0);
            $(newClicked).mouseover();
            clickedImg = newClicked;                   // redefine at the end

            alert($(this).attr('id') + " clicked"); // ajax call here
            });
});
</script>

<script type="text/javascript">
$(function() {
   var clickedImg = null; // same global
   // refactor the mouse over/out - you could use other jQuery ways here
   function doOver($img) {
       var src = $img.attr("src").match(/[^_\.]+/) + "_hover.png";
       $img.attr("src", src);
   }
   function doOut($img) {
       var src = $img.attr("src").replace("_hover","");
       $img.attr("src", src);
   }
   $("img.hoverImage")
        .mouseover(function () {
                var $img = $(this);
                if ($img.get(0) == clickedImg) return;
                doOver($img);
        })
        .mouseout(function () {
                var $img = $(this);
                if ($img.get(0) == clickedImg) return;
                doOut($img);
        });
   $("a.imageLink").click(function() {
        if (clickedImg) doOut($(clickedImg));
        clickedImg = $(this).find('img').get(0);
        doOver($(clickedImg));
        alert($(this).attr('id') + " clicked"); // presumably your ajax call here
   });
});
</script>