Hover effects in CSS

Web Development Front-End
1

Hello,

I’m working the first time on a website. But I’am kinda stuck. I have implemented a :hover pseudoclass for the navigation, that transitions the text. And at some point it did work. But now it doesn’t work anymore for some reason. Is there something I am missing?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="fotograf, Berlin, Deutschland, Weltweit, fotografie, portrait fotografie, portraitfotograf, business foto, kunst fotografie, eventfotograf, werbefotograf, fotokünstler, fotograf portrait, fotografie bilder, porträt fotografie, fotografie portrait, produkt fotografie, business fotografie, professionelles fotoshooting, business fotograf, fotograf business, fotograf berlin, fotografen berlin, fotografie berlin, eventfotograf berlin, portraitfotograf berlin, berlin fotograf, berlin fotografie, fotograf in berlin, schauspieler fotografie, fotograf schauspieler, schauspiel fotografen, fotograf für schauspieler, portrait foto, portrait fotoshooting, berlin eventfotograf, event fotografieren, werbefotografen, fotograf werbung, werbefoto, werbefotograf berlin, Photograph, Photographie, Businessphotograph">
    <meta name="description" content="Marco Baass bietet seit über 15 Jahren außergewöhnliche Fotografie für Unternehmen, Selbständige und Privatpersonen...">
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet">
    <title>Portrait People Event Fotograf Berlin</title>
</head>

<header>
    <nav>
        <h1>Marco Baass Fotografie</h1>
        <ul class="navigation">
            <a href="#">Portrait</a>
            <a href="#">Business</a>
            <a href="#">Editorial</a>
            <a href="#">Video</a>
            <a href="#">Impressum & Datenschutz</a>
        </ul>
    </nav>
</header>

<body>

<!-- Bannerbild !-->

    <div>
        <p>Hallo!
            Ich erzähle Ihre Geschichte
            Herzlich willkommen! Ich bin Fotograf aus Berlin für Portrait, Werbe und Event Fotografie. Ich bin spezialisiert auf kraftvolle und authentische Porträts. In meinem Portfolio finden sich Porträts von Menschen aus vielfältigen Lebensbereichen. Ich fotografiere von Editorials für Magazine bis hin zu Events. Dabei ist es meine Stärke, natürliche Momente im richtigen Licht einzufangen. So entstehen bleibende Eindrücke. Ich liebe es, mit meinen Bildern Geschichten zu erzählen. Aufnahmen zu erschaffen die Emotionen und Bedeutung vermitteln. Gemeinsam können wir auch Ihre Geschichte in einzigartigen Fotos und Videos festhalten!</p>
    </div>

    
</body>
</html>


CSS:

@font-face {
  font-family: 'Oswald';
  src: url(../fonts/Oswald/static/Oswald-Bold.ttf);
}

@font-face {
  font-family: 'text';
  src: url();
}

* {
    font-family: Helvetica, Arial, sans-serif;
  }

header {
  position: fixed;
  top: 0px;
  width: 100%;
  
}
 
nav {
  display: flex;
  justify-content: space-between;
  color: white;
  background-color: black;
  align-items: baseline;
  height: 100px;
}
  
h1 {
  margin-top: 25px;
  color: white;
  background-color: black;
  padding: 0px 0px 0px 15px;
  font-family: 'Oswald';
  font-size: 36px;
}

ul {
  padding: 10px 10px 0px 0px
}

p, a {
  font-size: 18px;
}
  
a {
    padding: 0px 20px 0px 0px;
    text-decoration: none;
}

a:visited {
  color: rgb(255, 255, 255);
}

a:hover {
  transition: 0.2s;
  transform: scale(1.09);
  cursor: url('../logos/photo_cursor.png'), auto;
  
}
  
a:active {
  transition: 0.2s;
  transform: scale(0.7);
}
  
body {
  position: absolute;
  top: 100px;
  color: black;
}
2

What did you do in the meantime, between some point and now?
And what exactly is not working anymore?
My first guess is that the stylesheet is not applied anymore. Maybe it was moved or renamed.
Give the body a background-color: red;
If the background color does not change, check your file path.

3

Yes, background changes to red. I was reorganizing the nav part a bit. But I cannot recall the exact steps. I should have kept the previous version. But it only was adding and changing padding and margin. The strange thing is also that the cursor still changes to the custom png on hover.

4

So it’s just the scaling that’s not working?

I’d recommend you try the following steps and corrections:

  • The header tag belongs inside the body
  • Wrap the anchor tags in list element – currently that’s not valid html
<ul class="navigation">
  <li><a href="#">Portrait</a></li>
  • Add a default transform to the anchor tags
a {
   ...
  transform: scale(1);
  transition: all 0.2s ease;
}
  • In the styles for the hover pseudo selector add the attribute(s) you want to transform
a:hover {
  transition: all 0.2s ease;
  • and most importantly, add display: inline-block to the anchor tag
5

So I made the changes, but it still didn’t work. So I changed a:hover and a:active to li:hover and li:active. And now the transform effect works again. But the cursor didn’t change. So I took the cursor out of the li selector and back into a:hover. Now everything works just fine.

I still don’t completely understand why, but for now it’s working. Thank you a lot!

1 Like
6

<li> is a block element (display: block). <a> is an inline element. I guess that’s why. Did you also implement my last point?

7

Yes, but than they were vertical for some reason. I also moved the display: inline-block to th list selector and that works.

8

I think my whole Header is a bit messy. Maybe I will do it from the scratch again at some point.

9

Hi there,
Based on my web search, the hover effect is not supported by most touch screen devices, because they do not have a cursor that can hover over an element without tapping it. [However, some devices may have alternative ways to simulate the hover effect, such as using a stylus, a long press, or a gesture]Redirecting)