将hover应用于文本而不是整个div

Question

我在这里有一个简单的问题。

我有一张图片和一张文字，需要在悬停时同时激活。目前它正在工作，但文本应用悬停到所有行大小而不仅仅是文本大小，所以当光标在空白区域时我想休息而不应用悬停状态。

<section id="portfolio">
            <div id="portfolio-content" class="separation">
                <a href="nacho-costa.html"><article class="col-left project responsive-col-1">
                    <div class="project-cover">
                        <img src="img/nacho-costa.jpg" class="over">
                        <img src="img/grid-black.jpg" class="under">
                    <div class="textdescription">
                    <h3 class="notranslate">Nacho Cosa></h3>
                    <h2 class="notranslate">Branding</h2>
                    <h4 class="date notranslate">01-2017</h4>

                </article></a>

CSS

    .project:hover .project-cover > .over {display: none;}
    .project:hover .project-cover > .under {display: inherit;}
    .project:hover h2, .project:hover h3, .project:hover h3 > span, .project:hover h4, .index:hover h2, .index:hover h3, .index:hover h3 > span, .index:hover h4 {color: #0000fc;}