我想在悬停时编辑元素的渲染。为此,我创建了一个 button
,我希望第一个 click
设置悬停渲染,第二个 click
重置悬停渲染。目前,即使我不在 div
上,也会出现 hover
样式:
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "transparent");
$('.contenu-editable .fa.fa-pencil').css("display", "none");
});
$("#editer-script").text('Rendre éditable');
} else {
$('.contenu-editable').mouseover(function(){
$('.contenu-editable').css("background-color", "#f4f6f9");
$('.contenu-editable .fa.fa-pencil').css("display", "inline-block");
});
$("#editer-script").text('Ne pas rendre éditable');
}
$(this).data("clicks", !clicks);
});
预先感谢您的帮助。
最佳答案
我会使用两个不同的 CSS 类。一种是默认值,一种是用于更改 hover
效果。然后只需在 click
按钮元素上切换
第二个类。
这比尝试按照您的方式进行操作要容易得多,并且可以仅在 css 中轻松更改和扩展它。以后不用再碰脚本了。
$("#editer-script").click(function() {
var clicks = $(this).data('clicks');
$('.contenu-editable').toggleClass('special', !clicks);
$("#editer-script").text(clicks ? 'Rendre éditable' : 'Ne pas rendre éditable');
$(this).data("clicks", !clicks);
});
.contenu-editable:hover {
background-color: transparent;
}
.contenu-editable:hover .fa.fa-pencil {
display: none;
}
.contenu-editable.special:hover {
background-color: #f4f6f9;
}
.contenu-editable.special:hover .fa.fa-pencil {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="editer-script">Rendre éditable</button>
<div class="contenu-editable">
<i class="fa fa-pencil">pencil</i>
content
</div>
关于javascript - 使用 JQuery 悬停 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49447932/