0

我试图用一个框突出一个选定的图像，与“悬停”显示的完全相同。有任何想法吗？我已经尝试了一些东西，但似乎没有任何效果。悬停功能完美运行，但是当单击时，即使光标移开，我也需要在图像周围出现一个框。我在下面粘贴了我的代码。先感谢您！！

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

2 回答 2

1

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

$(".swatch").click(function() {
    $(this).addClass("selected");
}
于 2013-03-06T23:40:03.690 回答
0

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

$(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-06T23:51:04.577 回答