Question

我的显示/隐藏鼠标悬停工作正常，我唯一的问题是当我刷新页面时它会显示我想要它默认隐藏的范围类。我如何编辑我的代码，使它默认隐藏它。我已经在我的显示中添加了：在我的CSS中没有，当我尝试它时，这段代码肯定会隐藏并在show / hide mouseover中禁用我的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";
}

这是我的带有display属性的css，我只尝试了一个li类，但默认的隐藏doest显示全部：

#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

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

默认情况下，您可以使用aid或span隐藏display: none;（使用visibility: hidden;该元素仍将占用与之前相同的空间。该元素将是隐藏，但仍影响布局。）

示例：

＆＃13;
＆＃13;
visibility: hidden;
＆＃13;
ul.image li span.effect { display: none; } ul.image li:hover span.effect { display: inline; }
＆＃13;
＆＃13;
＆＃13;

Answer 3

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');
});

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: