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>

M

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]
 
Sort by date Sort by votes
LTomy said:
Why do not you simply write h1.textfield:hover{} ?
Click to expand...
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]
 
Upvote 0 Downvote
Generate web designs from text or drawings
LTomy said:
You want to make the text of the whole <h1> green when the mouse cursor hovers it?
Click to expand...
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
Upvote 0 Downvote
LTomy said:
And if you do not set the color for the span and set it in the h1 instead?
Click to expand...
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]
 
Upvote 0 Downvote
Generate web designs from text or drawings
LTomy said:
I meant the same but without the 'color' property of the span.
Click to expand...
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]
 
Upvote 0 Downvote
Generate web designs from text or drawings
LTomy said:
I wanted you to try to change the color of the text through <h1> instead of the <span>.
Click to expand...
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!
 
Upvote 0 Downvote
Generate web designs from text or drawings
Generate web designs from text or drawings
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]
 
Upvote 0 Downvote
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;
}

}
 
Upvote 0 Downvote
Generate web designs from text or drawings
LTomy said:
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;
}

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

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom