如何在输入和标签元素内创建mouseover和mouseleave效果 [英] How to create mouseover and mouseleave effect within input and label elements

问题描述

这里我的目的是使用mouseover和mouseleave效果来替换包含在标签中的图像与图像列表。我目前使用Jquery点击功能来显示和隐藏图片列表。

Here my aim is to replace the images wrapped up in labels with the list of images using the mouseover and mouseleave effect. I currently use the Jquery click functionality to show and hide the list of images.

示例：

如果鼠标在 img1 上，则出现 img2 ，鼠标离开 img1 然后 img2 消失一次 img1 被点击 img2 停留在原位。我想为其他人相同的功能，假设我们现在可以看到 img2 我想看到 img4 出现如果鼠标进入 img3 然后返回 img2 ，则 img2 如果鼠标离开。

If the mouse is over img1 then img2 appears and once the mouse leaves img1 then img2 disappears however once img1 is clicked img2 stays where it is. I would like the same functionality for the others so assuming we can now see img2 I would like to see img4 appear and img2 dissappear if the mouse enters img3 and then back img2 if the mouse leaves.

基本上与此

HTML：

<div>

<input type="radio" value="1.0" id="b"/>
<label for="b"><img id="img1"  src="http://lorempixel.com/10/10"></label>

<input type="radio" value="2.0" id="c">
<label for="c" ><img id="img3"  src="http://lorempixel.com/10/10"></label>

<input type="radio" value="3.0" id="d"/>
<label for="d" ><img id="img5" src="http://lorempixel.com/10/10"></label>

</div>

 <ul>
 <li>
       <img id="img2" src="http://lorempixel.com/10/10" style="position:absolute">
       <img id="img4" src="http://lorempixel.com/10/10" style="position:absolute">
       <img id="img6" src="http://lorempixel.com/10/10" style="position:absolute">
   </li>
</ul>

CSS：

input[type="radio"] {
display: none;
}

#img1, #img3, #img5 {
width: 100px;
height:100px;
}

#img2{
bottom: 25px;
}
#img4 {
bottom: 50px;
}
#img6 {
bottom: 75px;
}

JQUERY：

   $("img[id='img2']").css({"display": "none"});
   $("img[id='img4']").css({"display": "none"});
   $("img[id='img6']").css({"display": "none"});

    $("#img1").click(function(){
        $("img[id='img2']").show();
        $("img[id='img4']").hide();
        $("img[id='img6']").hide();
    });

    $("img[id='img3']").click(function(){
        $("img[id='img4']").show();
        $("img[id='img2']").hide();
        $("img[id='img6']").hide();
    });

     $("img[id='img5']").click(function(){
        $("img[id='img6']").show();
        $("img[id='img2']").hide();
        $("img[id='img4']").hide();
    });

fiddle

推荐答案

我想你应该使用类来跟踪状态。或者，你可以使每个图像的对象，并添加跟踪状态的属性。我为你举了一个例子
JSFIDDLE

I think you should either use classes to keep track of the states. Or you can make objects of each of the images and add properties that keep track of the states. I made an example for you JSFIDDLE

img1 = {
  node: $('#img1'),
  target: $('img[id=img2]'),
  clicked: false
};

img3 = {
    node: $('#img3'),
  target: $('img[id=img4]'),
  clicked: false
};

img5 = {
    node: $('#img5'),
  target: $('img[id=img6]'),
  clicked: false
};

这篇关于如何在输入和标签元素内创建mouseover和mouseleave效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！