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 5 of 5

Thread: WP hover effect

  1. #1
    New to the CF scene
    Join Date
    Sep 2016
    Posts
    4
    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,165
    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
    6
    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,165
    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.


 

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
  •