Html 使单击的图像具有样式_Html_Css

Html 使单击的图像具有样式

html css

Html 使单击的图像具有样式,html,css,Html,Css,目前我有3个图像，当悬停时，它们周围有一个边框，我想要的是，当用户单击图像时，悬停样式保留在该图像上，我尝试使用：active，但没有效果以下是CSS代码： .portfolio-image{ border: 1px solid #e8ebef; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 0 5px 0 rgba(0

目前我有3个图像，当悬停时，它们周围有一个边框，我想要的是，当用户单击图像时，悬停样式保留在该图像上，我尝试使用：active，但没有效果

以下是CSS代码：

.portfolio-image{
border: 1px solid #e8ebef;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}

.portfolio-image:hover{
border:1px solid #123;
box-shadow:none;
}

而小提琴：

：仅当用户将鼠标按在元素上时，活动才保持有效

您需要使用JavaScript来完成此任务。

试试这个，CSS:

fieldset{
border:0px; padding:0px;
}
img.style1{
border: 1px solid #e8ebef;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
height:150px;
margin-bottom:20px;
max-width:100%;
position:relative;
width:150px;
}
img.style2{
border:1px solid #123;
box-shadow:none;

}

JavaScript（标题）：

HTML:

我没有测试代码，但你明白了。（我使用了收音机，因为我假设您想在表单中使用它们？

如果您想通过单击某个元素来对其进行

聚焦，它通常不会像表单元素那样聚焦，您需要添加tabindex
属性并将其设置为0
，以便拥有div
或img
，以便能够获得焦点并在CSS中使用：focus

在小提琴中，你在一个div
上画了一个边框，它包含一个包含图像的链接。div
没有tabindex

当您单击此框时，这是捕捉单击的链接，而不是div或图像，并且“关闭”和：focus
不能像这样使用

您可以使用：target
，如果该结构允许您通过CSS执行此操作

与在演示中一样，可以使用第n个子项（x）

来代替，您可以在框上使用单个ID来清晰地选择它们，而不必在意它们所处的数字位置

如果您感兴趣，这里有一个jQuery解决方案，这里有一个

就是这样，如果您决定使用jQuery，并且如果您还有其他问题，请询问；）

试过了，没有在这方面进行尝试。这是可行的，但当我添加第二个图像并单击两个图像时，红色边框将保留在两个图像上，而不会切换到活动图像？希望在Portfolio中使用它我尝试了它，但当我使用它时，我添加了删除实际图像上的框阴影，但它不会删除它，而且当我单击下一个图像时样式保持在上一个样式上image@Gareth看看小提琴，一切正常，我不明白你说的盒子阴影。是否要从活动图像中删除

box shadow

属性？如果是这样的话，我已经用这个选项更新了Fiddle。对不起，我现在就试用它。这是因为在您的代码中，映像位于不同的div中，并且它们不再是兄弟，我已经为您的案例更新了解决方案；）这很酷，但是方块阴影仍然存在

`function changeStyle(id, newClass){
        document.getElementById(id).className = newClass;
        }

        function changeOther1(newClass){
        document.getElementById("i1").className = newClass;
        }
}

`<fieldset class="radios"><label for="one" class="label_radio">
                                <img src="yourimage.jpg" id="i1" class="style1" onclick="changeStyle(this.id, 'style2');">
                                <input name="number" id="one" value="" type="radio" /></label></fieldset>

<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">
<img src="/" class="item" alt="Image">

img {
  width: 150px;
  height: 150px;
  margin: 20px;
  cursor: pointer;
  border: 1px solid gray;
}
.active {
  border: 1px solid red;
}

<script>
  (function($) {   

    $('.item').click(function() {
      $(this).addClass('active').siblings('.item').removeClass('active');
    });

    /* Requires jQuery UI
    $('.item').click(function() {
      $(this).switchClass('item','active',300).siblings('.active').switchClass('active','item',300);
    }); 
    */

  })(jQuery);
</script>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

  <!-- And if you want to use script above which requires jQuery UI -->
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>

<head>
  <script src="jquery-1.11.0.min.js"></script>
  <script src="jquery-ui-1.10.4.min.js"></script>
</head>

<head>
  <script src="scripts/jquery-1.11.0.min.js"></script>
  <script src="scripts/jquery-ui-1.10.4.min.js"></script>
</head>