Javascript 突出显示所选图像_Javascript_Css_Forms

Javascript 突出显示所选图像

javascript css forms

Javascript 突出显示所选图像,javascript,css,forms,Javascript,Css,Forms,我试图突出显示一个选定的图像，周围有一个框，与“悬停”显示的完全相同。有什么想法吗？我试过一些方法，但似乎都不管用。悬停功能工作得很好，但是当单击时，我需要一个框显示在停留的图像周围，即使光标移开。我已将代码粘贴到下面。提前谢谢你 <html><head> <style type="text/css"> .event { display: inline-block; float: left; } .swatch { width: 57px; height:

我试图突出显示一个选定的图像，周围有一个框，与“悬停”显示的完全相同。有什么想法吗？我试过一些方法，但似乎都不管用。悬停功能工作得很好，但是当单击时，我需要一个框显示在停留的图像周围，即使光标移开。我已将代码粘贴到下面。提前谢谢你

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


.事件{
显示：内联块；
浮动：左；
}
斯沃琪先生{
宽度：57px；
高度：45px；
显示：内联块；
浮动：左；
背景重复：无重复；
填充物：5px；
背景位置：中心；
边缘顶部：8px；
}
.斯沃琪：悬停{
边框：薄实线#999；
背景位置：中心；
}
.选定{
边框：薄实线#999；
}
.sq562白色{
背景图片：url（../images/products/women/lifeguard_girlstee_white.jpg）；
}
.sq562红色{
背景图片：url（../images/products/women/lifeguard_girlstee_red.jpg）；
}
$（窗口）。加载（函数（）{
$（文档）.ready（函数（）{
//隐藏所有事件
$（“#bigCal p”）.hide（）；
$（“.event a”）。单击（函数（evt）{
evt.preventDefault（）；
$（“#bigCal p”）.hide（）；
var id=$（this.attr（'id'）；
$（“+id）.show（）；
});
});
});//]]>  





红色
白色

使用

onclick

添加

。选择的类（使用jQuery，也可以仅使用JavaScript完成）：
您好，您还可以测试此代码：
$(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();
  });
});

还有一个示例：
这可能会有帮助：感谢您的回复！我很难让它工作。我把它添加到我的脑海中：$（“.swatch”）.click（function（）{this.addClass（“selected”）；}）；但是没有运气。也许那不是我该做的？对不起，新手@user2132851我刚刚编辑了我的答案；您必须将$（this）
替换为而不是this
，因为您正在对其使用jQuery。如果您想切换该类（单击一次添加类，然后单击下一次删除），您可以将添加类替换为切换类。好的，请尝试一下。非常感谢。非常感谢。这非常有效，只是我发现它与代码中的其他javascripts/jQuery脚本冲突（上面没有列出）。但这是我需要解决的另一个问题。再次感谢！
$(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();
  });
});