Applying text decoration on hover

Issue

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!

Solution

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>

Answered By - Maniruzzaman Akash