Jc John Jc John - 1 year ago 56
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; ?>
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(); ?>

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

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

function show_title0(){
function hide_title0(){

function show_title1(){
function hide_title1(){

function show_title2(){
function hide_title2(){

function show_title3(){
function hide_title3(){

function show_title4(){
function hide_title4(){

function show_title5(){
function hide_title5(){

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

#hoverli0 {

Answer Source

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

function hide_title(id){

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download