仅显示没有 onclick 的类的 Javascript 代码答案

【问题标题】：Only Javascript code to show a class without onclick仅显示没有 onclick 的类的 Javascript 代码
【发布时间】：2016-02-12 08:57:28
【问题描述】：

我需要一些帮助来解决我在使用一些 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。

我有 2 个问题。 1) 如果不在元素中添加 onclick 函数，我该怎么做？

2) 我找到了这段代码

<a href="#something">Show</a>
<div id="something">Bingo!</div>

#something {
  visibility: hidden;
}

#something:target {
  visibility: visible;
}

但我不能在 div 上放置任何 id。有什么办法可以用 javascript 将 id 添加到具有 classname: test1 的 div 中，然后运行上面的代码？

【问题讨论】：

标签： javascript html css wordpress

【解决方案1】：

看看这个例子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>

【讨论】：

只有点击而不是鼠标悬停！
@KwnstantinosNatsios 然后使用点击事件。检查jsfiddle.net/b20c15sr/1
请问可以用javascript代码制作吗？

【解决方案2】：

除了使用可见性，您还可以使用 display: none;然后使用 jQuery hide() 和 show() 方法。

https://jsfiddle.net/xpy9ux8u/

$(document).ready(function(){
    $("#button").mouseenter(function(){
        $(".hidden").show();
    });

    $("#button").mouseleave(function(){
        $(".hidden").hide();
    });
});

【讨论】：

Onclick 不是 mouseenter！
对于 onclick 只需使用 $("#button").click 而不是 $("#button").mouseenter