Trying to stop a link button from moving on hover

  • Resolved johnbrid

    (@johnbrid)


    7 years ago

    I am trying to change the behaviour of a freetobook widget. The search button jumps up on hover on my site. This is the first time freetobook have seen this behaviour and think it is something in the customizr theme. I was hoping I could stop the behaviour using this plug in. I have given this widget the class freetobook with your plug in. I have successfully managed to put a different background on the widget and added a red border to the container of the search button on hover. So the plug in is working well. The red border does not jump up but unfortunately the search button still does.
    My css is
    .freetobook {
    background-color: #858585;
    color:#FFF;
    transform:none;
    }
    .searchButtonContainer:not(.nohover):hover {
    border: 1px solid red;
    }
    When i examine the code for the page i can see this bit of code
    <div class=”searchButtonContainer”>
    <input value=”” class=”searchButton” type=”submit”>
    </div>
    I have not been able to apply the nohover CSS stuff to the class searchButton yet. Any ideas?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Jory Hogeveen

    (@keraweb)

    Hi @johnbrid,

    This plugin is only for adding CSS classes to a widget. Support with CSS itself is out of scope for support.
    I’d advice to hire a developer (can be me) or consult online help on websites like StackExchange to help you with your issue.
    Good luck!

    Regards, Jory

    Thread Starter johnbrid

    (@johnbrid)

    Thanks Jory. I got no replies from any of the help forums I went to. I did eventually solve it myself and sorry but I forgot to come back to let you know. In the end I did not use your plug in which i have to say did seem very useful just not in this case. I have included below the solution in case it is ever useful to you.

    I examined the code of the page and discovered which parent theme stylesheets were being used. I tried the common one first and searched for the word hover. Examined each one and looked for -10px or something similar.
    I found 4 such bits of code and tried them all. This one was the culprit and I have no idea what it does in the customizr theme but it messes up the freetobookwidget

    input[type=”submit”]:hover {
    background-position: 0 -15px;
    }

    This bit of code in the advanced css section of customizr stops the button jumping up on hover.

    input[type=”submit”]:hover {
    background-position: 0 0;
    }

    However when i put it into my child css the button still jumped. I then looked at the enqueue bit of the function.php of my child theme. It seems there issues over what you need to enqueue. I decided to enqueue both parent and child. i had to change it from

    <?php

    function theme_enqueue_styles() {
    // enqueue parent styles
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    }
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

    ?>

    to

    <?php

    function theme_enqueue_styles() {
    // enqueue parent styles
    wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
    // enqueue child styles
    wp_enqueue_style(‘child-theme’, get_stylesheet_directory_uri() .’/style.css’, array(‘parent-theme’));
    }
    add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

    ?>

    Thought this all might be helpful to someone else. It all seems to be working fine at thebeachfiley.co.uk//make-a-booking/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Trying to stop a link button from moving on hover’ is closed to new replies.