我有一个图像元素，我想在点击时改变它。
<img id="btnLeft">
如此:
#btnLeft:hover {
width: 70px;
height: 74px;
}
但我需要的是:
#btnLeft:onclick {
width: 70px;
height: 74px;
}
但是，很明显，这是行不通的。是否有可能在CSS中有onclick行为(即，不使用JavaScript)?
当前回答
你可以使用:target。
或者通过类名过滤，使用.classname:target。
或者使用#idname:target过滤id名。
#id01:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .msg { display: none; } .close { color: white; width: 2rem; height: 2rem; background-color: black; text-align: center; margin: 20px; } <a href="#id01">Open</a> <div id="id01" class="msg"> <a href="" class="close">×</a> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div>
其他回答
使用一个纯粹的CSS解决方案，而不是(那么)俗气。
.page { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background-color: #121519; color: whitesmoke; } .controls { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .arrow { cursor: pointer; transition: filter 0.3s ease 0.3s; } .arrow:active { filter: drop-shadow(0 0 0 steelblue); transition: filter 0s; } <body class="page"> <div class="controls"> <div class="arrow"> <img src="https://i.imgur.com/JGUoNfS.png" /> </div> </div> </body>
TylerH的反应很好，但它是一个相当复杂的解决方案。我有一个解决方案，你只是想要一个简单的“onclick”效果与纯CSS没有一堆额外的元素。
我们将简单地使用CSS过渡。你也可以用动画来做类似的事情。
诀窍是更改转换的延迟，以便在用户单击时它将持续。
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}
这里我也添加了“clicked”类，这样JavaScript也可以在需要时提供效果。我使用了一个零像素的投影过滤器，因为在我的例子中，它会以这种方式突出显示给定的透明图形蓝色。
我在这里有一个0的过滤器，所以它不会生效。当效果释放时，我可以添加一个延迟的过渡，这样它就会提供一个很好的“点击”效果。
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}
这允许我设置当用户单击按钮时，它突出显示蓝色，然后慢慢淡出(当然，您也可以使用其他效果)。
虽然您在这里受到限制，因为要突出显示的动画是即时的，但它仍然提供了所需的效果。你可以在动画中使用这个技巧来产生更平滑的整体过渡。
根据您想要做的事情，让焦点保持变化可能是一种选择?
<button></button>
<style>
button {
width: 140px;
height: 70px;
background: url('http://www.ranklogos.com/wp-content/uploads/2015/06/Stack-Overflow-Logo.png');
background-size: cover;
}
button:focus {
width: 240px;
height: 120px;
}
</style>
https://jsfiddle.net/anm92d0r/
注意，这对image标签不起作用。但根据你的元素id，我假设你在寻找按钮功能。
警告!下面特别简单的回答!：）
实际上，你可以只使用CSS(并且不使用复选框hack)就有一个持久的更改(例如在单击后出现并保持可见的块/弹出窗口)，尽管这里有许多(否则正确的)答案声称，只要你只需要在悬停期间保持持久性。
所以看看Bojangles和TylerH的答案，如果它们对你有用，但如果你想要一个简单的css答案，在点击后保持块可见(甚至可以让块在后续点击后消失)，那么看看这个解决方案。
我也遇到过类似的情况。我需要一个弹出的div与onClick，我不能添加任何JavaScript或改变标记/HTML(一个真正的CSS解决方案)，这是可能的，但有一些警告。你不能使用:target技巧，可以创建一个漂亮的弹出窗口，除非你可以改变HTML(添加一个'id')，所以这是出去了。
在我的例子中，弹出式div包含在其他div中，我希望弹出式div出现在其他div的顶部，这可以使用:active和:hover的组合来完成:
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
display: block;
}
/* General settings for popup */
.info {
position: absolute;
top: -5;
display: none;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}
示例(以及一个允许点击弹出使它消失):
CSS-Only onClick弹出Div(没有Javascript或HTML更改!)
我还在下面插入了一个代码片段示例，但在Stack Overflow沙箱中的定位是奇怪的，所以我不得不把“点击这里”文本放在innerDiv之后，这通常是不需要的。
/* Outer div - needs to be relative so we can use absolute positioning */ .clickToShowInfo { position: relative; } /* When clicking outer div, make inner div visible */ .clickToShowInfo:active .info { visibility: visible; } /* And hold by staying visible on hover */ .info:hover { visibility: visible; } /* General settings for popup */ .info { position: absolute; top: -10; visibility: hidden; z-index: 100; background-color: white; box-shadow: 5px 5px 2px #aaa; border: 1px solid grey; padding: 8px; width: 220px; height: 200px; } /* If we want clicking on the popup to close, use this */ .info:active { visibility: hidden; /* Doesn't work because DCEvent is :active as well */ height: 0px; width: 0px; left: -1000px; top: -1000px; } <p /> <div class="clickToShowInfo"> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua </div> Click here to show info </div> <p />
你可以使用:target。
或者通过类名过滤，使用.classname:target。
或者使用#idname:target过滤id名。
#id01:target { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .msg { display: none; } .close { color: white; width: 2rem; height: 2rem; background-color: black; text-align: center; margin: 20px; } <a href="#id01">Open</a> <div id="id01" class="msg"> <a href="" class="close">×</a> <p>Some text. Some text. Some text.</p> <p>Some text. Some text. Some text.</p> </div>
我有以下代码的鼠标悬停和鼠标点击，它的工作:
//For Mouse Hover
.thumbnail:hover span{ /* CSS for enlarged image */
visibility: visible;
text-align: center;
vertical-align: middle;
height: 70%;
width: 80%;
top: auto;
left: 10%;
}
当你点击图像时，这段代码会隐藏图像:
.thumbnail:active span {
visibility: hidden;
}
推荐文章
- 在输入type="number"时禁用webkit的旋转按钮?
- 如何在另一个元素之后添加一个元素?
- 我如何有效地解析HTML与Java?
- “ ”和“”有什么区别?
- 如何使用JavaScript代码获得浏览器宽度?
- 防止滚动条增加到Chrome页面的宽度
- 使用图像而不是单选按钮
- 将RGB转换为白色的RGBA
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 内嵌CSS有什么不好?
