Question

我希望在发生某些事情时（例如：单击一个按钮），我的图像在周围创建一个框架。像这样：

Image before, without the frame

Image after click, with the frame

我可以使用CSS吗？

我既不想有两个链接也不要有两个图像。我希望原始图像发生“转变”。

编辑：我知道我没有任何代码，但这是因为我没有CSS函数的任何功能或想法。因此，您无需编写代码，只需告诉我使用什么。希望你能理解

Answer 1

您应该使用javascript onClick事件处理程序和css border属性。

您的html图像和按钮标签。

<img src='yourimage.jpg' id='myimg'>
<button onclick="add_frame()">add frame</button>

javascript

function add_frame(){

document.getElementById('myimg').style.border = "2px solid red";

}

Answer 2

这里是使用jquery的示例。

向要添加边框的任何图像添加一个类（.border-on-click），这应该在CSS中包含透明边框（如果不这样做，则元素将移动切换边框并占用多余空间时，页面周围的内容。

在下面的示例中，您可以单击一下以打开或关闭边框。

它仅作用于您单击的图像。

让我知道这是否不是您想要的。

$(".border-on-click").click( function() {
  $(this).toggleClass("framed");
});

img.border-on-click {
  border: 4px solid transparent;
  transition: all 0.5s ease;
}

img.border-on-click.framed {
  border: 4px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="border-on-click" src="https://via.placeholder.com/150">

将色框添加到图像onClick

2 个答案: