Question

我正在尝试使用围绕它的框突出显示所选图像，与“悬停”显示的图像完全相同。有任何想法吗？我尝试过一些东西但似乎没什么用。悬停功能完美地工作，但是当点击时我需要在图像周围出现一个框，即使光标移开也是如此。我在下面粘贴了我的代码。提前谢谢!!

<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>

Answer 1

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

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

Answer 2

您好，您也可以测试此代码：

$(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/

突出显示所选图像

2 个答案: