Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: WP hover effect

  1. #1
    New to the CF scene
    Join Date
    Sep 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    WP hover effect

    Hello...
    I have two columns with text inside.
    Currently, text is black and background white.
    I want to achieve that when I hover over it - Change both text and background color (text to white, and background to blue).

    How to do that?

    Thanks

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,168
    Thanks
    38
    Thanked 1,090 Times in 1,086 Posts
    Does this work for you?
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>Page Title</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <style>
          body {
             margin: 0;
             padding: 0;
             height: 100%;
             width: 100%;
          }
    
          .wrapper {
             display: grid;
             grid-template-columns: 65vw 35vw;
             grid-template-rows: repeat(3, auto);
             grid-template-areas:
                "a a"
                "b c"
                "d d ";
          }
    
          .Header {
             background-color: pink;
             grid-area: a;
             height: 16vh;
          }
    
          .Left {
             background-color: lavender;
             grid-area: b;
             height: 74vh;
          }
    
          .Right {
             background-color: goldenrod;
             grid-area: c;
          }
    
          .Footer {
             background-color: lightgreen;
             grid-area: d;
             height: 10vh;
          }
    	  .Left:hover{
    		  background-color: white;
    		  color:green;
    	  }
    	  .Right:hover{
    		  background-color: white;
    		  color:red;
    	  }
       </style>
    </head>
    
    <body>
       <div class="wrapper">
          <div class="Header">Header</div>
          <div class="Left">Left column</div>
          <div class="Right">Right column</div>
          <div class="Footer">Footer</div>
       </div>
    </body>
    
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Supreme Master coder!
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    10,396
    Thanks
    10
    Thanked 1,191 Times in 1,181 Posts
    And you have WP in your post title. I assume you want to do this within wordpress? If so, you will create an HTML template (with aspects that sunfighter describes) that you will assign when adding a post. Or, if it's a page instead of a post, you would do it there. That's the thing with wordpress, you have pages, categories, and posts ... all of which can be customized, thus causing some confusion and some difficulties in knowing which place to do the "custom template". Added to that is the amount of editor frameworks (page builders) that can go with wordpress. WPBakery, Elementor, Themify, etc. This may alter the way templates are created and assigned. And this aspect of today's wordpress is what makes it so hard for me. I have friends who want me to help with with a wordpress site, and I discover that "damnit, now I have to learn Elementor".

    People don't realize the amount of learning it takes to add content, modify, and maintain a wordpress site. As soon as you think you have it working, your client will go in and add a post with the wrong category or template assigned, or they modify the CSS, fonts, colors, etc. within their post. Then you get emails asking you to fix it.

    Many times I question clients or people who ask me for website advice whether or not they really want it to be wordpress. Or, do they really need a website at all. Many businesses don't have websites anymore. Or, if they do, they just use a pre-made site using Wix, Weebly, or Square, and these are perfectly fine for showing people the business location, phone numbers, and store hours. Websites in 2019 are way overrated ... and in most cases, nobody maintains or updates them. I guess I 'ranted' instead of answering your post, sorry.
    Last edited by mlseim; Sep 7th, 2019 at 05:22 PM.

  4. #4
    New to the CF scene
    Join Date
    May 2019
    Location
    Ahmedabad
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <html>
    <head>
    <style>
    	td:hover{
    	 color:white;
    	 background-color:blue;
    	}
    </style>
    </head>
    <body>
    
    <table border="1">
    	<tr>
    		<td>Column1</td>
    		<td>Column2</td>
    	</tr>
    </table>
    </body>
    
    </html>

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    West Des Moines, Iowa
    Posts
    8,168
    Thanks
    38
    Thanked 1,090 Times in 1,086 Posts
    Holy sh*t Sherin Mathew, did you get that by reading my post? What a genius. Here's an idea, why not post some original info to help someone and I'll repost it as mine.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    New to the CF scene
    Join Date
    Sep 2016
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Does this work for you?
    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
       <meta charset="utf-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <title>Page Title</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <style>
          body {
             margin: 0;
             padding: 0;
             height: 100%;
             width: 100%;
          }
    
          .wrapper {
             display: grid;
             grid-template-columns: 65vw 35vw;
             grid-template-rows: repeat(3, auto);
             grid-template-areas:
                "a a"
                "b c"
                "d d ";
          }
    
          .Header {
             background-color: pink;
             grid-area: a;
             height: 16vh;
          }
    
          .Left {
             background-color: lavender;
             grid-area: b;
             height: 74vh;
          }
    
          .Right {
             background-color: goldenrod;
             grid-area: c;
          }
    
          .Footer {
             background-color: lightgreen;
             grid-area: d;
             height: 10vh;
          }
    	  .Left:hover{
    		  background-color: white;
    		  color:green;
    	  }
    	  .Right:hover{
    		  background-color: white;
    		  color:red;
    	  }
       </style>
    </head>
    
    <body>
       <div class="wrapper">
          <div class="Header">Header</div>
          <div class="Left">Left column</div>
          <div class="Right">Right column</div>
          <div class="Footer">Footer</div>
       </div>
    </body>
    
    </html>
    Can I do it inside Elementor?
    Should I buy Elementor Pro?

  7. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,682
    Thanks
    5
    Thanked 529 Times in 515 Posts
    Quote Originally Posted by sunfighter View Post
    Holy sh*t Sherin Mathew, did you get that by reading my post? What a genius. Here's an idea, why not post some original info to help someone and I'll repost it as mine.
    Assuming the mental midgetry of tables for layout and the deprecated BORDER attribute didn't make it PAINFULLY obvious said user is using 20 year out of date coding techniques -- like pretty much all their other posts -- making it clear as crystal they need to learn more about HTML and CSS before trying to answer posts here.

    Though I'm wondering why the OP would want the entire column to colour on hover... that doesn't seem kosher. A better answer could probably be given if we could see the site in question, though being turdpress Christmas only knows what type of ineptly coded train wreck laundry list of how NOT to build a website we're talking about here.

    The use of monuments to ineptitude that are editors like Elementor likely meaning it's an utter and complete disaster. There's a reason such "tools" are nothing more than scams made to take advantage of people who just don't know any better. Moment you see "visual design" in a "page builder'... run. Run like The Doctor just told you to run for your lives.
    Last edited by deathshadow; Sep 17th, 2019 at 03:12 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •