How can I hover only content of span? - css

Question

Today, I am comming with a problem from work. First of all, the code was created some time ago and I have to correct it now. Of course I've made the sandbox easier to avoid unnecessary styles.
<div>
<a id="perfect" href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
padding: 30px 10px 0;
}
.maker {
display: block;
padding: 20px 10px 0;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
I have three tile there. First of all works what I expect, but I would like to receive the same result on the second and third tile without paragraph.
The clue is that red color appears, if I put a mouse on random place above right content. I mean all span called "problem" is on hover.
How to ensure a similar behaviour like in first tile on the others without using paragraph? Do you have some idea?
I've tried to do that using margin, but it was wrong.

Answer 1

Try to add this into your stylesheets:
div > a > span:hover {
color: red;
}

Answer 2

Here is a solution:
Your issue is that your applying padding: 30px 10px 0; to span. The link is applying itself to the entire span with its padding.
I removed padding on your span and instead applied it to the div. - You can now adjust the padding on the div instead of the span.
Additionally, I moved the #perfect id to the first div because it had a different background-color.
div {
display: block;
width: 150px;
height: 150px;
background: lightblue;
text-align: center;
float: left;
margin: 10px;
padding: 30px 10px 0;
}
a {
display: block;
width: 150px;
height: 150px;
text-decoration: none;
color: black;
}
.problem {
display: block;
}
.problem:hover {
color: red;
}
.maker {
display: block;
}
p {
padding: 0;
margin: 0;
}
p:hover {
color: red;
}
.perfect {
display: block;
}
#perfect {
background-color: pink;
}
<div id="perfect">
<a href="https://css-tricks.com/">
<span class="perfect">
<p>Perfect</p>
</span>
<span class="maker">Solution</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>
<div>
<a href="https://css-tricks.com/">
<span class="problem">Problem</span>
<span class="maker">Makes me cry</span>
</a>
</div>

Answer 3

Just change the display for the .problem from 'block' to 'inline-block', change the padding-top to 0 and give a margin-top of 30px
.problem {
display: inline-block;
padding: 0px 10px 0;
margin-top: 30px;
}
.problem:hover {
color: red;
}