Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

CSS hover effect not working with <span></span>

Maja0802

Well-Known Coder
Hey there:blush::blush:

I want to make hover effect on my h1 headlines, but it does not work with the <span></span>. It works fine if the header is just wrapped in <h1></h1>, but I need the <span></span> in order for the background color on the header to wrap correctly.

any ideas?

[CODE lang="css" title="hover effect not working" highlight="26"]<!DOCTYPE html>
<html>
<head>

<style>

body {
margin-top: 50px;
color: rgb(184, 170, 140);
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
line-height: 1.2;
}
.textfield span {
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;

.textfield span:hover {
color: green;
}

}
p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
}

</style>


<h1 class = "textfield"> <span> #1 TEST. This is a test to see if the hover effect works. </span></h1>

<p>This is a paragraph</p>

<h1 class = "textfield"> <span> #2 TEST </span></h1>

<p> This is a paragraph </p>
</head>

<body>


</body>

</html>
[/CODE]
 
Why do not you simply write h1.textfield:hover{} ?
like this? Can't make it work :laugh::(

[CODE lang="css" title="css" highlight="26"]<!DOCTYPE html>
<html>
<head>

<style>

body {
margin-top: 50px;
color: rgb(184, 170, 140);
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
line-height: 1.2;
}
.textfield span {
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;

h1.textfield:hover {
color:green;
}

}
p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
}

</style>


<h1 class = "textfield"> <span> #1 TEST. This is a test to see if the hover effect works. </span></h1>

<p>This is a paragraph</p>

<h1 class = "textfield"> <span> #2 TEST </span></h1>

<p> This is a paragraph </p>
</head>

<body>


</body>

</html>
[/CODE]
 
You want to make the text of the whole <h1> green when the mouse cursor hovers it?
yes! But if I deleted the span, the background colour of the text wont warp around the title (or at least the lines will be ordered in a weird way). See screenshoots :)
 

Attachments

  • Skærmbillede 2021-01-03 kl. 23.31.09.png
    Skærmbillede 2021-01-03 kl. 23.31.09.png
    93 KB · Views: 3
  • Skærmbillede 2021-01-03 kl. 23.31.28.png
    Skærmbillede 2021-01-03 kl. 23.31.28.png
    95.6 KB · Views: 3
And if you do not set the color for the span and set it in the h1 instead?
Like this?

Then the lines look weird (like the second screenshoot)

[CODE lang="css" title="css"]<!DOCTYPE html>
<html>
<head>

<style>

body {
margin-top: 50px;
color: rgb(184, 170, 140);
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
line-height: 1.2;
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
background-color: rgb(38, 102, 145);
}

h1.textfield:hover {
color:green;
}

}
p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
}

</style>


<h1 class = "textfield"> #1 TEST. This is a test to see if the hover effect works.TEST. This is a test to see if the hover effect works. TEST. This is a test to see if the hover effect works. TEST. This is a test to see if the hover effect works. TEST. This is a test to see if the hover effect works. </h1>

<p>This is a paragraph</p>

<h1 class = "textfield"> <span> #2 TEST </span></h1>

<p> This is a paragraph </p>
</head>

<body>


</body>

</html>[/CODE]
 
I meant the same but without the 'color' property of the span.
true it is not used for anything. Does not solve the hover problem though
[CODE lang="css" title="css"]<!DOCTYPE html>
<html>
<head>

<style>

body {
margin-top: 50px;
color: rgb(184, 170, 140);
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
line-height: 1.2;
}
.textfield span {
background-color: rgb(38, 102, 145);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;

.textfield span:hover {
color:green;
}

}
p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
}

</style>


<h1 class = "textfield"> <span> #1 TEST. This is a test to see if the hover effect works. </span></h1>

<p>This is a paragraph</p>

<h1 class = "textfield"> <span> #2 TEST </span></h1>

<p> This is a paragraph </p>
</head>

<body>


</body>

</html>
[/CODE]
 
I wanted you to try to change the color of the text through <h1> instead of the <span>.
yeah, good idea. However it only works if I don't use span at all, but that gives me trouble with the lines, when I have multiple. Might be better to look at it with fresh eyes, should not be to difficult. Thanks for your help!
 
Hi!

I was looking through the code and discovered that line 25 id missing a closing curly bracket }.

[CODE lang="html" highlight="25"]<!DOCTYPE html>
<html>
<head>

<style>

body {
margin-top: 50px;
color: rgb(184, 170, 140);
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
line-height: 1.2;
}
.textfield span {
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;

.textfield span:hover {
color: green;
}

}
p {
font-family: "JetBrains Mono";
margin-right: 150px;
margin-left: 200px;
line-height: 1.5;
}

</style>


<h1 class = "textfield"> <span> #1 TEST. This is a test to see if the hover effect works. </span></h1>

<p>This is a paragraph</p>

<h1 class = "textfield"> <span> #2 TEST </span></h1>

<p> This is a paragraph </p>
</head>

<body>


</body>

</html>[/CODE]
 
I think it is not that it is missing, but rather that the '.textfield span:hover' is inside the '.textfield span':
CSS:
.textfield span {
      background-color: rgb(38, 102, 145);
      color: rgb(253, 103, 73);
      display: inline;
      font-family: "JetBrains Mono", Sans-serif;
      text-align: right;

.textfield span:hover {
  color: green;
}

}
 
I think it is not that it is missing, but rather that the '.textfield span:hover' is inside the '.textfield span':
CSS:
.textfield span {
      background-color: rgb(38, 102, 145);
      color: rgb(253, 103, 73);
      display: inline;
      font-family: "JetBrains Mono", Sans-serif;
      text-align: right;

.textfield span:hover {
  color: green;
}

}
Yeah, I believe it needs to be closed before calling a new selector. But I'll look more into this.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom