Skip to main content
BenSCR
BenSCR
Inspiring
January 13, 2021
Question

Hover (Change colour of RollOver)

  • January 13, 2021
  • 2 replies
  • 2249 views

How can I change the colour of a RollOver during Hover, when I press the word 'Portfolio' so it changes from "White" to "Yellow" when touched.

 

Where about in the below code would I add the Hover/RollOver for colour change?

 

<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>Ben</title>
 
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
 
}
h1 {
  background-color: ;
  color: white;
}
 
h2 {
  background-color: ;
  color: white
}
 
body {
font-family: 'DotMatrix',sans-serif, sans-serif;
font-size: 7px;
color: #000;
position: relative;
line-height: 24px;
line-height: 1.5em;
background: #000;
 
-webkit-font-smoothing: antialiased;
 
 
</style>
</head>
<body>
 
<style>A {text-decoration: none;} </style>
 
<a href="Ben.html" >
<h1>PORTFOLIO</h1>
</a>
<h1>ABOUT</h1>
 
 <img src="NIKE Air Tailwind 79.jpg"/"NIKE" width="229" style="width:37%">
 
</body>
</html>
 
 
 
    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    January 14, 2021

    It goes without saying that HOVER has no effect on touch screen devices which the majority of site visitors are using these days. So more than half of users will probably never see the a:hover effect. 

     

    Experienced developers would NEVER waste precious heading tags on navigation.  <h1> headings are intended for the most important keywords on your page.  That's usually your site or business name, not navigation links.  Also <h1> is rarely if ever used more than 1 x per page.

     

    The way you structure content in the markup is ranked by search engines.  And since search engines drive traffic to your site, you want to get this right the first time. Google's SEO starter guide is a MUST READ for anyone new to building web sites.

    https://developers.google.com/search/docs/beginner/seo-starter-guide

     

    Below is a quick code example to get you started in the right direction.

     

     

     

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ben's Awesome Portfolio ~ since 2021 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
body {
width: 96%;
margin: 0 auto;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
background: #222;
color: antiquewhite;
/**scale fonts to fit any size screen**/
font-size: calc(14px + 1vw);
line-height: calc(1.2em + 1.5vw);
}
header img {
vertical-align: baseline;
margin: 0 auto;
max-width: 100%;
}
nav li {
list-style-type: none;
text-align: right;
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 0.16rem;
line-height: 1;
}
nav li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
}
nav li a:hover, 
nav li a:active, 
nav li a:focus {
color: yellow;
text-decoration: underline;
}
</style>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Ben's Awesome Portfolio</h1>
<h2>Home Page</h2>
<img src="https://dummyimage.com/1200x400" alt="placeholder">
</header>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
</main>
<hr>
<footer>
<p>© 2021 all rights reserved by XYZ Website</p>
</footer>
</body>
</html>

     

     

     

     

    Nancy O'Shea— Product User & Community Expert
      BenSCR
      BenSCRAuthor
      Inspiring
      January 14, 2021

      I guess from what your saying, it's best not to have the hover effect, and just leave the text/navigation as white due to mobile devices etc. I've noticed other people presenting there online portfolio don't have the hover effect.

      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      January 14, 2021

      You can still have a:hover effects if you want.  In my example, I added a:active and a:focus states for people using a tab key or tapping the link with their finger.  But in the end it's all just eye candy and not very important compared to the correct use of <h1> tags.

       

      As to your layout comp, how is that supposed to work on mobile phones and tablets that don't have enough real estate for a 3 column grid?  You have room for only one column on a mobile phone and possibly 2 on a tablet.  What do you envision for those devices?

       

      Nancy O'Shea— Product User & Community Expert
        O
        osgood_
        Legend
        January 13, 2021

        Just add the below to your css styles, insert between the css <style> </style> block.

         

        a:hover {

        color: yellow;

        }

         

        This will turn every link on your page yellow on hover.

         

        If you only want a set of specific links in a specific <div> to turn yellow on hover you would target only that div:

         

        .myDivName a:hover {

        color: yellow;

        }

         

          BenSCR
          BenSCRAuthor
          Inspiring
          January 13, 2021

          I'm not sure what I'm doing wrong, as it's not working.

           

          Do I create a separate <style></style> or add it to to the already existing style in my HTML

           

          <!DOCTYPE html>
          <html><head>
          <meta charset="UTF-8">
          <title>Ben</title>
           
          <style>
          img {
            display: block;
            margin-left: auto;
            margin-right: auto;
           
          }
          h1 {
            background-color: ;
            color: white;
          }
           
          h2 {
            background-color: ;
            color: white
          }
           
          body {
          font-family: 'DotMatrix',sans-serif, sans-serif;
          font-size: 7px;
          color: #000;
          position: relative;
          line-height: 24px;
          line-height: 1.5em;
          background: #000;
           
          -webkit-font-smoothing: antialiased;

           

          a:hover {

          color: yellow;

          }

          </style>
          </head>
          <body>
           
          <style>A {text-decoration: none;} </style>
           
          <a href="Ben.html" >
          <h1>PORTFOLIO</h1>
          </a>
          <h1>ABOUT</h1>
           
           <img src="NIKE Air Tailwind 79.jpg"/"NIKE" width="229" style="width:37%">
           
          </body>
          </html>
           
          O
          osgood_
          Legend
          January 13, 2021

          Well your body css is missing a closing } see in red below:

           

          body {
          font-family: 'DotMatrix',sans-serif, sans-serif;
          font-size: 7px;
          color: #000;
          position: relative;
          line-height: 24px;
          line-height: 1.5em;
          background: #000;

          -webkit-font-smoothing: antialiased;

          }

           

          a:hover {

          color: yellow;

          }

           

           

           

          You dont want links surrounded by <h1></h1> tags, reserve heading tags for headers.

           

          Try:

           

          <a href="Ben.html" >PORTFOLIO</a>

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices