Как навести курсор на контейнер, чтобы отобразить кнопку read-more с Javascript? - PullRequest
Новая
       0

Как навести курсор на контейнер, чтобы отобразить кнопку read-more с Javascript?

1 голос
/ 07 апреля 2020

Я сделал страницу HTML, в которой при наведении указателя мыши на контейнерный класс я хотел, чтобы класс read-more отображался, иначе он должен быть скрыт.

Я пробовал много, но я не могу понять это!

Если вы знаете, пожалуйста, сделайте это для меня !!

Я даже в порядке с 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

????????

Ответы [ 3 ]

1 голос
/ 07 апреля 2020

Если вам НУЖНО 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>

Living демо: https://codepen.io/marchmello/pen/ExVYYjz

0 голосов
/ 07 апреля 2020

Вы также можете сделать это с CSS как 

<!DOCTYPE html>
<html>
<style>
.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; */
}

.details{
position : relative;
}
.tooltip {
  visibility : hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 43px;
  left: 84%;
  margin-left: -60px;


}
.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.details:hover .tooltip {
  visibility: visible;
}


</style>
<body style="text-align:center;">
<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>
              <div class = "details">
             <a class="read-more" href="#" id="auBtn">Read More</a>
             <span class ="tooltip">Read</span>

             </div>
            </div>

        </div>
      </div>
      </div>
</body>
</html>

Примечание: для более подробной информации https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top

0 голосов
/ 07 апреля 2020

Вы можете сделать это, как показано в следующем коде (только CSS): 

a.read-more{ display: none;}
.container:hover a.read-more{ display: block;}
<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...