Question

I recently installed the mouse / cursor trials plugin for wordpress. The plugin is working, however the mouse trail image dissapears behind the content of the site and only shows on the background

Would anyone perhaps be able to guide me in the right direction to repair it please?

Thank you

Link to the plugin: WordPress Cursor Trails

function add_cursor_trail(){
    $ct_data = get_option('cursor_trail_options');
    if( date('Y-m-d', current_time('timestamp')) == '2011-02-14'){
        $ct_data['pointer'] = WP_PLUGIN_URL.'/cursor-trail/valentines.png'; 
    }
    if( !empty($ct_data['start']) && current_time('timestamp') <= strtotime($ct_data['start']) ){
        return;     
    }
    if( !empty($ct_data['end']) && current_time('timestamp') >= strtotime($ct_data['end']) ){

        return;
    }
    ?>
    <script type="text/javascript">
        jQuery(document).ready( function($) {
            var container = $(document.body);
            var speed = <?php echo $ct_data['speed']; ?>;
            container.mousemove( function(e){
                if( $(this).parents('a').length == 0 ){
                    $('<img src="<?php echo $ct_data['pointer']; ?>" />').css({ 'position':'absolute', 'top':e.pageY+5, 'left':e.pageX+5}).prependTo(container).fadeOut(speed, function(){ 
                        $(this).remove(); 
                    });
                }
            });
        });
    </script>
    <?php
}
add_action('wp_head','add_cursor_trail',999);

/* Creating the wp_events table to store event data*/
function cursor_trail_activate() {
    $ct_data = array(
        'pointer' => WP_PLUGIN_URL.'/cursor-trail/pointer.png',
        'speed' => 900
    );
    add_option('cursor_trail_options', $ct_data);
}
register_activation_hook( __FILE__,'cursor_trail_activate');

class CursorTrailAdmin{
    // action function for above hook
    function CursorTrailAdmin() {
        global $user_level;
        add_action ( 'admin_menu', array (&$this, 'menus') );
    }

    function menus(){
        $page = add_options_page('Cursor Trail', 'Cursor Trail', 'manage_options', 'cursor-trail', array(&$this,'options'));
        add_action('admin_head-'.$page, array(&$this,'options_head'));
    }


    function options_head(){
        ?>
        <style type="text/css">
            .nwl-plugin table { width:100%; }
            .nwl-plugin table .col { width:100px; }
            .nwl-plugin table input.wide { width:100%; padding:2px; }
        </style>
        <?php
    }

    function options() {
        add_option('cursor_trail_options');
        if( is_admin() && !empty($_POST['ctsubmitted']) ){
            //Build the array of options here
            foreach ($_POST as $postKey => $postValue){
                if( substr($postKey, 0, 3) == 'ct_' ){
                    //For now, no validation, since this is in admin area.
                    if($postValue != ''){
                        $ct_data[substr($postKey, 3)] = $postValue;
                    }
                }
            }
            update_option('cursor_trail_options', $ct_data);
            ?>
            <div class="updated"><p><strong><?php _e('Changes saved.'); ?></strong></p></div>
            <?php
        }else{
            $ct_data = get_option('cursor_trail_options');  
        }
        ?>
        <div class="wrap nwl-plugin">
            <h2>Cursor Trail</h2>
            <div id="poststuff" class="metabox-holder has-right-sidebar">
                <div id="side-info-column" class="inner-sidebar">
                <div id="categorydiv" class="postbox ">
                    <div class="handlediv" title="Click to toggle"></div>
                        <h3 class="hndle">Donations</h3>
                        <div class="inside">
                            <em>Plugins don't grow on trees.</em> Please remember that this plugin is provided to you free of charge, yet it takes many hours of work to maintain and improve!
                            <div style="text-align:center;">
                                <form action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                    <input type="hidden" name="cmd" value="_s-xclick">
                                    <input type="hidden" name="hosted_button_id" value="8H9R5FVER3SWW">
                                    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
                                    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div id="categorydiv" class="postbox ">
                        <div class="handlediv" title="Click to toggle"></div>
                        <h3 class="hndle">Plugin Information</h3>
                        <div class="inside">
                            <p>This plugin was developed by <a href="http://twitter.com/marcussykes">Marcus Sykes</a> @ <a href="http://netweblogic.com">NetWebLogic</a></p>
                            <p>Please visit <a href="http://netweblogic.com/forums/">our forum</a> for plugin support.</p>
                        </div>
                    </div>
                </div>
                <div id="post-body">
                    <div id="post-body-content">
                        <p>If you have any suggestions, come over to our plugin page and leave a comment. It may just happen!</p>
                        <form method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
                        <table class="form-table">
                            <tbody id="lwa-body">
                                <tr valign="top">
                                    <td colspan="2">
                                        <h3><?php _e("General Settings", 'cursor-trail'); ?></h3>
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td scope="row">
                                        <label><?php _e("Cursor Image", 'cursor-trail'); ?></label>
                                    </td>
                                    <td>
                                        <input type="text" name="ct_pointer" value='<?php echo (!empty($ct_data['pointer'])) ? $ct_data['pointer']:WP_PLUGIN_URL.'/cursor-trail/pointer.png'; ?>' class='wide' />
                                        <i><?php _e("Add the url for the image you want to use as a cursor trail. Defaults to a mouse pointer if left blank.", 'cursor-trail'); ?></i> 
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td scope="row">
                                        <label><?php _e("Cursor Fade Speed", 'cursor-trail'); ?></label>
                                    </td>
                                    <td>
                                        <input type="text" name="ct_speed" value='<?php echo (!empty($ct_data['speed'])) ? $ct_data['speed']:900; ?>' class='wide' />
                                        <i><?php _e("Speed in ms that each cursor trail will take to fade out.", 'cursor-trail'); ?></i> 
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td scope="row">
                                        <label><?php _e("Start Date", 'cursor-trail'); ?></label>
                                    </td>
                                    <td>
                                        <input type="text" name="ct_start" value='<?php echo (!empty($ct_data['start'])) ? $ct_data['start']:''; ?>' class='wide' />
                                        <i><?php _e("If filled, cursors won't start to trail until this date. Use YYYY-MM-DD format.", 'cursor-trail'); ?></i> 
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td scope="row">
                                        <label><?php _e("Cut-Off Date", 'cursor-trail'); ?></label>
                                    </td>
                                    <td>
                                        <input type="text" name="ct_end" value='<?php echo (!empty($ct_data['end'])) ? $ct_data['end']:''; ?>' class='wide' />
                                        <i><?php _e("If filled, cursors won't trail after this date. Use YYYY-MM-DD format.", 'cursor-trail'); ?></i> 
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr valign="top">
                                    <td colspan="2">    
                                        <input type="hidden" name="ctsubmitted" value="1" />
                                        <p class="submit">
                                            <input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
                                        </p>                            
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <?php
    }
}
global $CursorTrailAdmin; 
$CursorTrailAdmin = new CursorTrailAdmin();

I have tried adding the following to my style.css, however it is not working:

img[src$="/pointer.png"] { 
  z-index: 1000; 
}

Answer 1

Had the same problem, this fixed it:

img[src$="/pointer.png"],
img[src$="/valentines.png"] {
  z-index: 1000!important;
}