javascript - 修复我的隐藏默认值以及鼠标悬停时的显示/隐藏

Question

我的显示/隐藏鼠标悬停运行良好，我唯一的问题是默认情况下，当我刷新页面时，它会显示我希望它默认隐藏的跨度类。我如何编辑我的代码以使其默认隐藏它。我已经在我的CSS中添加了display:none，当我尝试它时，这段代码明确隐藏并在显示/隐藏鼠标悬停中禁用我的javascript。顺便说一句，我在 WordPress 环境中，我循环它，因为它是一个帖子。

所以我想要的就是将其设为默认值:使用下面的代码隐藏

这是我的代码，如下所示:

<?php $count = 0; ?>
<?php
if( $projectsBlog->have_posts() ) : ?>
<div class="container">
<ul class="image">
    <div class="row row-centered">
    <?php while ( $projectsBlog->have_posts() ) : $projectsBlog->the_post(); ?>

        <div class="col-xs-4 col-box1" onMouseOver="show_title<?php echo $count ?>()" onMouseOut="hide_title<?php echo $count ?>()">

        <li class="top-featured-image">
        <span class="effect" id="hoverli<?php echo $count ?>"><?php the_title( sprintf('<a href="%s">', esc_url(get_permalink())),'</a>'); ?></span>

        <?php the_post_thumbnail(); ?>

        </div>
    <?php if($count==2) :
    echo '</div>';
    echo '<div class="row row-centered">'; 
    endif; ?>
    </li>
    <?php $count++; endwhile; ?>
    </ul>
    </div>
    <?php endif; ?>

这是我的 javascript，我一一制作它，因为它正在循环:

function show_title0(){
  document.getElementById('hoverli0').style.visibility="visible";
}
function hide_title0(){
  document.getElementById('hoverli0').style.visibility="hidden";
}

function show_title1(){
  document.getElementById('hoverli1').style.visibility="visible";
}
function hide_title1(){
  document.getElementById('hoverli1').style.visibility="hidden";
}

function show_title2(){
  document.getElementById('hoverli2').style.visibility="visible";
}
function hide_title2(){
  document.getElementById('hoverli2').style.visibility="hidden";
}

function show_title3(){
  document.getElementById('hoverli3').style.visibility="visible";
}
function hide_title3(){
  document.getElementById('hoverli3').style.visibility="hidden";
}

function show_title4(){
  document.getElementById('hoverli4').style.visibility="visible";
}
function hide_title4(){
  document.getElementById('hoverli4').style.visibility="hidden";
}

function show_title5(){
  document.getElementById('hoverli5').style.visibility="visible";
}
function hide_title5(){
  document.getElementById('hoverli5').style.visibility="hidden";
}

这是我的带有显示属性的 css，我只尝试了一个 li 类，但默认隐藏不显示所有:

#hoverli0 {
    display:none;
}

Answer 1

不要为每个元素创建单独的函数，而是创建两个泛化函数，如下所示。要隐藏和显示，您应该使用 display:none 和 display:block ，如下所示。

function show_title(id){
    document.getElementById('id').style.display="block";
}

function hide_title(id){
    document.getElementById('id').style.display="none";
}

并在 php 代码中传递元素的 id，如下所示。

<div class="col-xs-4 col-box1" onMouseOver="show_title('hoverli<?php echo $count ?>')" onMouseOut="hide_title('hoverli<?php echo $count ?>')">

这样只需要两个函数就可以实现，不需要多余的函数。