J'ai créé une page HTML, en ce sens que lorsque je survole la classe conteneur, je voulais que la classe en lecture plus soit affichée, sinon elle devrait être masquée.

J'ai beaucoup essayé mais je n'arrive pas à le comprendre!

Si vous le savez, faites-le pour moi !!

Je suis même OK avec JQuery

Code 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>

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

Code JavaScript JAVASCRIPT

????????

1
Quic Flicks 7 avril 2020 à 18:53

4 réponses

Meilleure réponse

Si vous AVEZ BESOIN de javascript, ajoutez simplement un écouteur d'événements au <div>.

Voici un exemple:

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>

Une démo vivante: https://codepen.io/marchmello/pen/mdJNNQV?editors= 1010

Ou vous pouvez ajouter des transitions en utilisant les deux fonctions hide() et fadeToggle() dans 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>

Démo vivante: https://codepen.io/marchmello/pen/ExVYYjz

1
MARSHMALLOW 7 avril 2020 à 18:47

Vous pouvez également le faire avec CSS comme

<!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>

Remarque: Pour plus de détails https://www.w3schools.com/css/tryit .asp? filename = trycss_tooltip_arrow_top

0
Kunal Raut 7 avril 2020 à 16:57

Vous pouvez le faire comme dans le code suivant (CSS uniquement):

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>
0
Anurag Srivastava 7 avril 2020 à 15:56

Vous n'avez pas besoin de Javascript. Cela peut être fait avec CSS en utilisant le sélecteur: hover. J'ajouterai un exemple dans une minute. Actuellement sur mon téléphone.

0
alexako 7 avril 2020 à 15:57