CODEWITHSUNDEEP
htmlcss
Asef Dian
Asef Dian

Reputation: 27

Why is text shadow not working on mouse hover

I made this code. The elements under the class toptext should get a shadow when hovered. but it is not working. I checked for typos or other problems. Couldn't find any. Text shadow should show up on hover. But it is not working. Any idea why?

.toptext {
  color: darkblue;
  text-decoration: none;
  font-size: 30;
  padding: none;
  transition: 0.5s;
}

.toptext:hover {
  color: darkcyan;
  text-shadow: 2px, 2px, 5px fuchsia;
}
<html>

<head>
  <link rel="stylesheet" href="Style.css">
  <h1 id="name">ASEF DIAN</h1>
</head>

<body>
  <div id="top">
    <a href="" class="toptext">Skills</a>
    <a href="" class="toptext">Works</a>
    <a href="" class="toptext">Contact</a>
  </div>
</body>

</html>

Upvotes: 1

Views: 2187

Answers (3)

SoliMoli
SoliMoli

Reputation: 786

I think your code was wrong. You look for something like this? btw you can use https://css3gen.com/text-shadow/ to publish a correct code of txt shadows.

.toptext {
    color: darkblue;
    text-decoration: none;
    font-size: 30;
    padding: none;
    transition: 0.5s;
}
.toptext:hover {
    color: red;
    font-size:25px;
    text-shadow: 2px 2px 5px fuchsia;
}
<html>
    <head>
        <link rel="stylesheet" href="Style.css">
        <h1 id="name">ASEF DIAN</h1>
    </head>
    <body>
        <div id="top">
            <a href="" class="toptext">Skills</a>
            <a href="" class="toptext">Works</a>
            <a href="" class="toptext">Contact</a>
        </div>
    </body>
</html>

Upvotes: 3

Rodrigo
Rodrigo

Reputation: 106

remove the comma in text-shadow property. It must be like: text-shadow: 2px 2px 5px fuchsia;

Upvotes: 1

K K
K K

Reputation: 18099

Remove commas (,) from text-shadow

.toptext {
    color: darkblue;
    text-decoration: none;
    font-size: 30;
    padding: none;
    transition: 0.5s;
}
.toptext:hover {
    color: red;
    font-size:25px;
    text-shadow: 2px 2px 5px fuchsia;
}
<html>
    <head>
        <link rel="stylesheet" href="Style.css">
        <h1 id="name">ASEF DIAN</h1>
    </head>
    <body>
        <div id="top">
            <a href="" class="toptext">Skills</a>
            <a href="" class="toptext">Works</a>
            <a href="" class="toptext">Contact</a>
        </div>
    </body>
</html>

Refer: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Upvotes: 1

Related Questions