只有Javascript代码可以显示不带onclick的类

Only Javascript code to show a class without onclick

本文关键字：onclick 的类 显示 Javascript 代码 只有      更新时间：2023-09-26

我想要一些帮助来解决我在一些javascript代码中遇到的一个问题。我有这个html元素

<a style="color: rgb(255, 255, 255) !important; background-color: rgb(12, 12, 12);" href="#" class="bwpb-button test2 bwpb-btnregular" onmouseover="this.style.backgroundColor=&quot;#dd3333&quot;" onmouseout="this.style.backgroundColor=&quot;#0c0c0c&quot;"><i class="undefined"></i>This is a button</a>

它有一个类名：test2

在这个按钮类型的下面有一个类名为test1的div，它有3张照片。

.test1 { visibility: hidden; }

我在上面写的css样式是隐藏的，我想让它在单击按钮类型时可见。我尝试了下面的代码，但没有任何效果

第一次尝试：

#test2:active ~ #test1 { visibility: visible; }

第二次尝试：

$(document).ready(function(){
         $(".test2").mouseover(function(){
              $(".test1").css("visibility", "visible");
         });
    });

我无法在按钮类型元素中放入"onclick"函数，因为它在wordpress中，而且我找不到主题使用的index.php。

我有两个问题。1） 如果不在元素中放入函数onclick，我怎么能做到这一点？

2） 我找到了这个代码

<a href="#something">Show</a>
<div id="something">Bingo!</div>
#something {
  visibility: hidden;
}
#something:target {
  visibility: visible;
}

但是我不能在div上放任何id。有没有办法用javascript将id添加到类名为test1的div中，然后运行上面的代码？

查看此示例https://jsfiddle.net/b20c15sr/

你可以很容易地将jquery用于

<div class="test1">
    I am hidden
</div>
<a style="color: rgb(255, 255, 255) !important; background-color: rgb(12, 12, 12);" href="#" class="bwpb-button test2 bwpb-btnregular" onmouseover="this.style.backgroundColor=&quot;#dd3333&quot;" onmouseout="this.style.backgroundColor=&quot;#0c0c0c&quot;"><i class="undefined"></i>This is a button</a>
<script>
$(function(){
    $('.test2').click(function(){
        $('.test1').css('visibility', 'visible')
    })
})
</script>

除了使用可见性，您还可以使用display:none；然后使用jQuery hide（）和show（）方法。

https://jsfiddle.net/xpy9ux8u/

$(document).ready(function(){
    $("#button").mouseenter(function(){
        $(".hidden").show();
    });
    $("#button").mouseleave(function(){
        $(".hidden").hide();
    });
});
相关文章：