javascript - 如何将鼠标悬停在容器上以显示带有 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

????????

标签： javascriptjqueryhtmlcss

Answer 1

如果您需要 javascript，只需将事件侦听器添加到<div>.

这是一个例子：

document.getElementById("info").addEventListener("mouseover", function() {
  document.getElementById("auBtn").style = "display: block;";
});

document.getElementById("info").addEventListener("mouseout", function() {
  document.getElementById("auBtn").style = "display: none;";
});

.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;
}

<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" id="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" style="display: none;" id="_id">Read More</a>
            </div>

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

现场演示：https ://codepen.io/marchmello/pen/mdJNNQV?editors=1010

或者你可以通过使用这两个函数hide()和fadeToggle()在 jQuery 中添加一些转换：

$("#auBtn").hide();

$("#info").hover(function() {
  $("#auBtn").fadeToggle(400);
});

.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);
    /* display: none; */
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<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" id="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" id="_id">Read More</a>
            </div>

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

现场演示：https ://codepen.io/marchmello/pen/ExVYYjz