使用jquery打开div并单击并悬停
使用jquery打开div并单击并悬停
提问于 2016-05-15 10:38:20
当我悬停或单击class = "img-1“时，我希望弹出class = "block 1”并隐藏class = "block-default“。此外，我还希望在没有操作时重新显示缺省块。
<style>
.bloc{
width: 300px;
height: 300px;
position: absolute;
}
.bloc:nth-child(1){
background-color: #003169;
}
.bloc:nth-child(2){
background-color: #00A8FF;
}
img{
float:right ;
}
</style>
<body>
<div class="Bloc">
<div class="bloc">Bloc-1</div>
<div class="bloc">Bloc-2</div>
<div class="bloc">Bloc-defaut</div>
</div>
<div class="img">
<img class="img-1" title="image-1" src="" />
<img class="img-2" title="image-2" src="" />
</div>
</body>回答 2
Stack Overflow用户
发布于 2016-05-15 11:38:14
添加可以在默认类的基础上添加其他类，也可以使用nth-child(n)进行选择
jQuery：
$(document).ready(function(){
$('.img-1').on('mouseover mouseout click',function(){
$('.bloc-default').toggleClass('hide')
})})；
css：
.bloc{
width: 100px;
height: 100px;
position: absolute;
}
.hide{
display:none;
}
.bloc{
background-color: #CC2222;
}
.bloc:nth-child(1){
background-color: #003169;
}
.bloc:nth-child(2){
background-color: #00A8FF;
}
img{
float:right ;
}HTML：
<div class="Bloc">
<div class="bloc">Bloc-1</div>
<div class="bloc">Bloc-2</div>
<div class="bloc bloc-default">Bloc-defaut</div>
</div>
<div class="img">
<img class="img-1" title="image-1" src="//lorempixel.com/100/111" />
<img class="img-2" title="image-2" src="//lorempixel.com/100/110" />
</div>Demo
Stack Overflow用户
发布于 2016-05-15 12:18:28
试试这个：
var img1 = document.querySelectorAll("[title=image-1]");
img1.onclick = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
img1.className += " block-1";
}
else {
img1.className =
img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
img1.className += " block-default";
}
};
img1.onmouseover = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-default ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-default(?!\S)/g, '');
img1.className += " block-1";
}
};
img1.onmouseout = function() {
var currentClass = (' ' + img1.className + ' ').indexOf(' block-1 ') > -1;
if (currentClass) {
img1.className =
img1.className.replace(/(?:^|\s)block-1(?!\S)/g, '');
img1.className += " block-default";
}
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37233975
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号