修复我的隐藏默认设置并在鼠标悬停时显示/隐藏

Question

我的显示/隐藏鼠标悬停运行良好，我唯一的问题是当我刷新页面时默认显示我希望它默认隐藏的跨度类。我如何编辑我的代码以使其默认隐藏它。我已经在我的显示中添加了：在我的 css 中没有，当我尝试它时，这段代码肯定会隐藏并在显示/隐藏鼠标悬停时禁用我的 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 ?>')">

这样你只需要两个功能就可以实现，不需要多余的功能。

Answer 2

IMO，在单个查询中使用 toggleClass。

如果您只想使用 jQuery 来完成，您可以压缩代码并使用以下查询以简单的方式完成。

//Hide all the span by default
$('li.top-featured-image > span').addClass('hide');
//Use mouse enter and leave events in a query
$(document).on('mouseenter mouseleave', '.top-featured-image',function(){
   $(this).find('span').toggleClass('show hide');
});

$('li.top-featured-image > span').addClass('hide');
$(document).on('mouseenter mouseleave', '.top-featured-image',function(){
  $(this).find('span').toggleClass('show hide');
});

.show
{
  display: block; 
} 
.hide
{
  display: none; 
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="image">
	<li class="top-featured-image">
		<span class="effect">span content1</span>
		-image-1
	</li>
	<li class="top-featured-image">
		<span class="effect">span content2</span>
		-image-2
	</li>
	<li class="top-featured-image">
		<span class="effect">span content3</span>
		-image-3
	</li>
	<li class="top-featured-image">
		<span class="effect">span content4</span>
		-image-4
	</li>
	<li class="top-featured-image">
		<span class="effect">span content5</span>
		-image-5
	</li>
	<li class="top-featured-image">
		<span class="effect">span content6</span>
		-image-6
	</li>
</ul>

Answer 3

为此，您不需要 javascript。我认为CSS :hover Selector 是正确的选择。

您可以默认隐藏spandisplay: none;或visibility: hidden;（使用visibility: hidden;元素仍将占用与以前相同的空间。元素将被隐藏，但仍会影响布局） .

示例：

ul.image li span.effect {
  display: none;
}

ul.image li:hover span.effect {
  display: inline;
}

<ul class="image">
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
	<li class="top-featured-image">
		<span class="effect">span content</span>
		-image-
	</li>
</ul>