JSFiddle - React, Tailwind, and code Playground

by iambriansreed

HTML

<div class="views-row">
    <div>
        <h5 class="product-name"><a href="#">Dots</a></h5>  
    </div>  
    <div class="views-field">       
        <div class="field-content">
            <a href="#"><img alt="" src="#" /></a>
        </div>  
    </div>
</div>
<div class="views-row">
    <div>
        <h5 class="product-name"><a href="#">Dots</a></h5>  
    </div>  
    <div class="views-field">       
        <div class="field-content">
            <a href="#"><img alt="" src="#" /></a>
        </div>  
    </div>
</div>
<div class="views-row">
    <div>
        <h5 class="product-name"><a href="#">Dots</a></h5>  
    </div>  
    <div class="views-field">       
        <div class="field-content">
            <a href="#"><img alt="" src="#" /></a>
        </div>  
    </div>
</div>
<div class="views-row">
    <div>
        <h5 class="product-name"><a href="#">Dots</a></h5>  
    </div>  
    <div class="views-field">       
        <div class="field-content">
            <a href="#"><img alt="" src="#" /></a>
        </div>  
    </div>
</div>
<div class="views-row">
    <div>
        <h5 class="product-name"><a href="#">Dots</a></h5>  
    </div>  
    <div class="views-field">       
        <div class="field-content">
            <a href="#"><img alt="" src="#" /></a>
        </div>  
    </div>
</div>

CSS

a {
    text-decoration: none;
}

JavaScript

$('.views-field').hover(function() {
    $('h5', $(this).closest('.views-row')).css('text-decoration', 'underline');
}, function() {
    $('h5', $(this).closest('.views-row')).css('text-decoration', 'none');
});