Jc John Jc John - 2 months ago 7
Javascript Question

fixing my hide default and show/hide when it is mouse hover

My show/hide mouseover is working good and my only problem is by defult when i refresh the page it shows my span class that i want it to by default hide. How can i edit my code to make it definitely hide it by default. I already added in my display:none in my css and when i tried it, this code hide definitely and disable my javascript in show/hide mouseover. By the way i am in wordpress environment and i was looping it because it is a post.

So all i want is to make it default: hide using this code below

Here is my code something like this:

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


here is my javascript i made it one by one because it was looping :

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";
}


here is my css with display attribute where i tried only one li class but the default hidden doest display all:

#hoverli0 {
display:none;
}

Answer

Instead of creating seperate functions for each elements create two generalize functions as below. And to hide and show you should have to use display:none and display:block as below.

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

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

And pass the id of element in the php code as below.

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

In this way you can achieve by only two functions no need of redundant functions.