CODEWITHSUNDEEP
htmlcss
Life with George
Life with George

Reputation: 45

After pseudo elements to display contents in another div

I have two div(s), one contains a list e.g. About, partners and so forth. In another divs i want to insert another list. I cant figure out how use the after pseudo element to display the contents of the second div when i hover on About (which is inside the first div) i have tried various things and still cant figure out. Thank you for any help

<div class="firstscreen">
        <div class="header">
            <div id="trademark">    
                <img src="images/coin.png" id="logo">
                <h2 id="logoName">Test</h2>
            </div>  


            <div id="divList">
                <ul id="list">
                    <li id="About">About</li>
                    <li>Test</li>
                    <li>Partners</li>
                    <li>Contact</li>
                </ul>

                <div id="abouthover">
                    <p>Testing</p>
                </div>

            </div>

        </div>
***** css code below *****
html body {
    margin: 0px;
    padding: 0px;
    background-color:#F4F6FF;

}

.firstscreen{

    height: 63em;
    background: url("images/shopping.jpeg");

}

/*  header is a first main div on the first page that contains two divs trademark and divList */
.header {
    width: 100%;
    position: fixed;
    display: flex;
    background-color: white;
    top:0px;
    border: solid red;


}

/* travemark is a div containing the logo plus logoName*/
#trademark {

    width: 15%;
    display: flex;

}

#logo {
    width: 70px;
    height: 70px;
    object-fit: contain;

}

#logoName {
    float: right;
    font-size: 24px;
    padding-left: 10px;
    color: #1a237e;

}

/* divList is a div containing <ul> lists*/
#divList {

    width: 30%;
    text-align: center;
    margin-left: 20%;
    padding-top: 10px;
    border: solid purple;
}

#list li {
    display: inline;
    margin: 20px;
    font-size: 20px;
    color: #1a237e;
}

#About::after {

}

#abouthover {
    border: solid green;
    position: relative;
    border: solid green;
    display: block;
    position: absolute;
}

Upvotes: 1

Views: 487

Answers (1)

Front End Coder
Front End Coder

Reputation: 468

Below is the code to show and hide list on About :hover inside same div under about.

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
</head>
<body>
<div id="divList">
  <ul id="list">
    <li id="About">About</li>
    <li>Test</li>
    <li>Partners</li>
    <li>Contact</li>
  </ul>

  <div id="abouthover" style="display: none;">
    <p>Testing</p>
  </div>

</div>
</body>
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
  $(document).ready(function() { 
    $("#About").hover(function() {

      $("#abouthover").show();

    });
    $("#About").mouseout(function() {

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

    });
  });
</script>

</html>

Upvotes: 2

Related Questions