如何将鼠标悬停在容器上以显示带有Javascript的更多按钮？

Question

我制作了一个html页面，因为当我将鼠标悬停在容器类上时，我希望显示更多阅读类，否则应该将其隐藏。

我已经尝试了很多，但是我无法弄清楚！

如果您知道，请帮我吧！

我什至可以使用JQuery

HTML代码HTML

<div class="author">
      <div class="box">
        <div class="container" id="auHov">

            <div class="logo">
              <img src="authorLogo.png" alt="Author Logo">
            </div>

            <div class="info">
              <h2><a href="#">Quic Flicks</a></h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
              tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
              quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat.</p>
             <a class="read-more" href="#" id="auBtn">Read More</a>
            </div>

        </div>
      </div>
      </div>

CSS代码CSS

.author {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.author .box {
    margin-left: 80px;
    margin-right: 80px;
}

.author .box .container {
    padding: 1em;
    width: 100%;
    height: auto;
    border-radius: 5px;;
    background: linear-gradient(45deg, #F45C43, #EB3349);
    background-size: contain;
}

.author .box .container .logo {
    padding: 8px;
    margin: 12px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.author .box .container .logo img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 6px solid var(--light);
}

.author .box .container .info {
    float: right;
    padding: 10px;
    margin: 4px;
}

.author .box .container .info h2 {
    font-size: 26px;
    font-family: 'Lobster', cursive;
    transition: linear 0.3s;
}

.author .box .container .info h2 a {
    text-decoration: none;
    color: var(--light-primary);
    cursor: pointer;
    text-shadow: 0.1px 0.1px 2px var(--dark);
    transition: ease 0.3s;
}

.author .box .container .info h2 a:hover {
    transition: linear 0.3s;
    text-shadow: 0.8px 0.8px 3.9px var(--dark);
    color: var(--primary);
}

.author .box .container .info p {
    font-size: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 32px;
    word-spacing: 1px;
    color: var(--light-primary);
    text-shadow: 0.1px 0.1px var(--dark);
    cursor: default;
}

.author .box .container .info .read-more {
    text-decoration: none;
    float: right;
    padding: 12px;
    margin: 5px;
    text-transform: uppercase;
    font-size: 1em;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    color: var(--dark);
    background: var(--primary);
    transition: ease 0.4s;
    /* display: none; */
}

.author .box .container .info a:hover {
        background: var(--dark-primary);
        transition: linear 0.2s;
}

javascript代码JAVASCRIPT

????????

Answer 1

另一答案

Answer 2

另一答案