Question

我正在使用以下代码在基础图像悬停时显示叠加图像：

$(".roll").css("opacity","0"); 
$(".roll").show();
// on mouseover
$(".roll").hover(function () {
  var s = $(this).siblings('img');
  var w = s.css("width");
  var h = s.css("height");

$(this).css("height",h).css("width",w).stop().animate({
   opacity: .6 }, 
   "fast");
 },
// on mouseout
function () {
   $(this).stop().animate({
     opacity: 0
    }, "fast");
 });

这就是HTML的样子：

 <a class="image"  href="#">
        <span class="roll" style="display:none;"></span>
        <img src="mypic.png" class="image">
 </a>

如何实施＆＃34;点击＆＃34;事件，以便在单击图像时，叠加层保持而不是在鼠标移除时消失。

我已经开始使用以下内容，但不确定还能做什么：

 $('.roll').on("click", function() {
    if ($(this).hasClass("selected")) {
       $(this).removeClass("selected");
       // remove overlay here?
    }
    else if (!$(this).hasClass("selected")) {
       $(this).addClass("selected");
       // add overlay here?
    }
 });

可能很简单，但我不确定如何在基本的鼠标悬停/鼠标移除之外执行它。

谢谢！

Answer 1

当img没有选择类似

时，你可以阻止鼠标输出功能

//on mouseout
function () {
    if (!$(this).hasClass("selected"))
    {
       $(this).stop().animate({
        opacity: 0
       });
    }
}

意味着您必须检查鼠标悬停/退出功能：您的图片是否已经点击过？

Onmouseover ：如果尚未点击（已选择），则添加叠加
Onmouseout ：如果尚未点击（已选择），则删除叠加

Answer 2

您希望叠加图像接收点击事件或基本图像吗？我将假设基本图像，但实现应该基本相同。

// declare a flag in the outer scope
var stickImage = false;
$(".roll").css("opacity", "0");
$(".roll").show();
// on mouseover
$(".roll").hover(function() {
    var s = $(this).siblings('img');
    var w = s.css("width");
    var h = s.css("height");

    $(this).css("height", h).css("width", w).stop().animate({
        opacity: .6
    }, "fast");
});

// on click, toggle the stickImage boolean
$(".roll").click(function() {
    stickImage = !stickImage;
});

// on mouseout
function() {
    // check to make sure stickimage is false before hiding
    if (!stickImage) {
        $(this).stop().animate({
            opacity: 0
        }, "fast");
    }
});

图像叠加jQuery - 让图像保持单击

2 个答案: