Html Question posted in
Some basic documentation can be found here.

Html – Applying text decoration on hover

So, I am creating a simple site and can’t figure out a solution for the life of me. I want to apply text decoration to some text, here is how it’s laid out.

It essentially goes like this:

<div class="wrapper">
    <a href="#">
        <div id="listing">
            <p id="title">Dev</p>
            <p id="location">New York City</p>
            <p id="salary">$30/hr</p>
            <p id="desc">Description</p>
            <p id="tag">Remote</p>
        </div>
     </a>
</div>

So basically I want to apply text decoration to the #title ID when you hover over the .wrapper class. I only know the way to apply it while hovering over the #title, which is fine if it’s not possible, but I would like to know if there is a way. Thank in advance!

Tags:

2

Answers


  1. 0 
    a {
   text-decoration: none;
}

.wrapper:hover #title {
    text-decoration: underline;
}
    <div class="wrapper">
    <a href="#">
        <div id="listing">
            <p id="title">Dev</p>
            <p id="location">New York City</p>
            <p id="salary">$30/hr</p>
            <p id="desc">Description</p>
            <p id="tag">Remote</p>
        </div>
     </a>
</div>
    Login or Signup to reply.
  2. 0 
    .wrapper:hover #title {
  text-decoration: line-through;
}

    This is how you target the title. I’d suggest you remove the text decoration from the parent link tag then style the children tag as you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search