突出显示所选图像

我想突出显示一个带有框的选定图像，与“悬停”显示的内容完全相同。有任何想法吗？我尝试了一些东西，但似乎没有任何工作。悬停功能可以很好地工作，但点击时，即使光标移开，我也需要一个框出现在保留的图像周围。下面粘贴了我的代码。先谢谢你！！突出显示所选图像

<html><head> 

<style type="text/css"> 
.event { 
display: inline-block; 
float: left; 
} 

.swatch { 
width: 57px; 
height: 45px; 
display: inline-block; 
float: left; 
background-repeat: no-repeat; 
padding: 5px; 
background-position: center center; 
margin-top: 8px; 
} 

.swatch:hover { 
border: thin solid #999; 
background-position: center center; 
} 

.selected { 
border: thin solid #999; 
} 

.sq562-white { 
background-image: url(../images/products/women/lifeguard_girlstee_white.jpg); 
} 


.sq562-red { 
background-image: url(../images/products/women/lifeguard_girlstee_red.jpg); 
} 
</style> 

<script type="text/javascript"> 
$(window).load(function(){ 
$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 

    $("." + id).show(); 
}); 
}); 
});//]]> 

</script> 

</head> 
<body> 
<li class="event"> 
    <a id="red" href="#" > 
     <div class="swatch sq562-white"></div> 
    </a> 
</li> 

<li class="event"> 
    <a id="blue" href="#"> 
     <div class="swatch sq562-red"></div> 
    </a> 
</li> 
</ul> 


<div id="bigCal"> 
<p style="display: block; margin-top:25px; margin-bottom:-54px;" class="all blue"><a title="Red">Red</a></p> 
<p style="display: none; margin-top:25px; margin-bottom:-54px;" class="all red"><a title="White">White</a></p> 

</div> 


</body></html>

来源

2013-03-06 user2132851

这可以帮助：http://stackoverflow.com/questions/6491962/custom-checkbox/6492222＃6492222 – kapa 2013-03-06 23:39:02

你好，你还可以测试这个代码：

$(document).ready(function() { 
// hide all the events 
$("#bigCal p").hide(); 

$(".event a").click(function(evt) { 
    evt.preventDefault(); 
    //remove the previous selected item 
    $(".swatch").removeClass("selected"); 
    //select the current item 
    $(".swatch", this).addClass("selected"); 
    $("#bigCal p").hide(); 
    var id = $(this).attr('id'); 
    $("." + id).show(); 
    }); 
});

而且一个样本：http://jsfiddle.net/SNUhB/2/

来源

2013-03-06 23:51:04

谢谢！这完美的作品，只有我发现它与我的代码中的其他javascripts/jQuery脚本（上面未列出）冲突。但那是我需要解决的一个单独问题。再次感谢！ – user2132851 2013-03-07 00:00:56

使用onclick添加.selected类（使用jQuery，也可以用只有JavaScript来实现）：

$(".swatch").click(function() { 
    $(this).addClass("selected"); 
}

来源

2013-03-06 23:40:03

谢谢你的回应！我很难得到它的工作。我将它添加到我的头上：但没有运气。也许那不是我想要做的？对不起，新手在这里！ – user2132851 2013-03-06 23:47:33

@ user2132851我刚才编辑了我的答案;您必须将'$（this）'替换为'this'，因为您正在使用jQuery。 – 2013-03-06 23:50:53

如果你想切换类（添加类onclick然后删除下一次点击），你可以用'toggleClass'替换'addClass'。 – 2013-03-06 23:52:58

突出显示所选图像

回答

相关问题