Hover animation that will change my <strong> elements?

Hey there! So I’m trying to style a hover animation. I want the bold elements of my paragraph to change color when I hover over the paragraph container. (I used “strong” in my HTML) Is there a CSS command for styling the “strong” elements ONLY within my “p” elements, that won’t affect the whole paragraph? The issue I’m having is that if I create an id for my “strong” elements and then use
" .paragraph:hover + #strong { color: white; } " or any variation it turns the entire paragraph that color, if I apply the hover animation to the “strong” element by itself then it will only happen when I hover over the text, not the entire paragraph. Can I link the action & the command in some way? ANY help would be greatly appreciated

<div class="text">
        <p>Hello my name is <strong>Patrick</strong> and this is my first website, I am 23 years old and I have been studing coding for a month now. It's difficult but rewarding! I made this websire using <strong>HTML</strong> and <strong>CSS</strong>! I hope that by the end of the summer i will be able to build and launch my own websites from scratch!</p>
.text {
  width: 485px;
  height: relative;
  text-align: center;
  color: #F2F5EA;
  border-radius: 10px;
  padding: 10px;
  background-color: black;
  border: 2px solid #44C5A7;
  margin-left: 7px;
}
.text:hover{
  border: 2px solid #FE4A49;
}
strong {
  color: #FE4A49;
}

Hi there,

So, you have .text indicated for the hover animation. This makes everything in the div.text hover. If <strong> is the only <strong> in your HTML you want to have the hover animation, you can

strong:hover {

}

Otherwise, you can use other specificity to target.

Thanks for the reply! So I want the color to change when I hover over the container which holds my entire paragraph, not the “strong” element itself. Is there any way I can do that? :slight_smile:

Oh, I see what you’re asking.

Give this a try:

.text:hover strong {
  color: color;
}
1 Like