[Theme:Preferential Lite]The Hover effect doesn't affect my whole button?

  • Resolved OmarBlake-Dafaalla

    (@omarblake-dafaalla)


    8 years, 10 months ago

    I’m using a child theme of Preferential Lite on https://malvernwellsmassage.co.uk/ and using the plugin ‘Easy Faq with Expanding Text’ to create some drop down text boxes.

    I’ve given the h3 a button-like styling, and want to make it highlight when moused over. It highlight part of the button but not all of it. There is a strip above the button’s text that does not highlight and I can’t figure out why.

    Here is my css to make this work:

    h3 {

	font-size: 1.5rem;
	background: #3498db;
	background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	background-image: -o-linear-gradient(top, #3498db, #2980b9);
	background-image: linear-gradient(to bottom, #3498db, #2980b9);
	-webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	font-family: "Helvetica Neue";
	color: #ffffff;
	padding: 10px 20px 10px 20px;
	text-decoration: none;

}

h3:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  -webkit-border-radius: 6;
	-moz-border-radius: 6;
	border-radius: 6px;
	font-family: "Helvetica Neue";
	color: #ffffff;
	padding: 10px 20px 10px 20px;
  text-decoration: none;
}

    Any help would be very much appreciated!

Viewing 4 replies - 1 through 4 (of 4 total)

  • That’s because there’s an inline HTML code that messes up the position of the background background-position-y: 12px

    I’m not sure whether it’s something you added or the theme automatically generated that. But you have 2 options:

    1. Manually remove that inline HTML, or
    2. Use !important declaration inside your CSS to overwrite that.

    If you go with #2, then please add this line to your CSS:

    h3:hover {
    background-position-y: 0 !important;
}
    Thread Starter OmarBlake-Dafaalla

    (@omarblake-dafaalla)

    Hi ThePixelMe,

    Unfortunately, the CSS part did not work. How would I go about editing the HTML?

    Thanks for the help

    I just took a look at your site again and it looks like it worked though.

    Try reload your site a few time or clearing your web browser’s cache and take a look again; sometimes the web browser saves an old version of the CSS file locally on your computer for a while before updating it.

    How to clear web browser’s cache: https://www.refreshyourcache.com/en/home/

    Thread Starter OmarBlake-Dafaalla

    (@omarblake-dafaalla)

    Oh, perfect, thank you! I’ll be sure to keep that in mind in the future!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Theme:Preferential Lite]The Hover effect doesn't affect my whole button?’ is closed to new replies.