Jump to content


  • Posts

  • Joined

  • Last visited

bilz636's Achievements


Newbie (1/7)



  1. HI thanks for replying me back. Actually its more like "tabs" i found similar solution from somewhere. <style> @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap'); section{ padding: 80px 0; } img{ max-width: 100%; } *{ font-size: 16px; font-family: 'Noto Sans TC', sans-serif; } a{ text-decoration: none; } a:hover{ text-decoration: none; } .uppercase__font{ text-transform: uppercase; } .capitalize__font{ text-transform: capitalize; } .justify{ text-align:justify; } .underline{ text-decoration: underline; } h1{ font-size: 70px; } h2{ font-size: 50px; @media screen and(max-width: 768px){ font-size: 35px; } } h3{ font-size: 40px; @media screen and(max-width: 768px){ font-size: 25px; } } h4{ font-size: 30px; @media screen and(max-width: 768px){ font-size: 20px; } } h5{ font-size: 24px; @media screen and(max-width: 768px){ font-size: 18px; } } h6{ font-size: 18px; @media screen and(max-width: 768px){ font-size: 14px; } } h1, h2, h3, h4, h5{ font-weight: 900; } @for $i from 1 through 9 { .fw-#{$i}{ font-weight: 100 * $i !important; } } @for $i from 1 through 9 { .lh-#{$i}{ line-height: 1rem * $i !important; } } .normal{ font-weight:normal !important; } .no__outline{ outline-style: none !important; } .pointer{ cursor: pointer; } // ul .ul__list--inline{ list-style:none; padding:0; margin:0; >li{ display:inline-block; } } .ul__list{ list-style:none; padding:0; margin:0; } .sosmed__list{ li{ a{ width: 40px; height: 40px; transition: .5s; border-radius:50%; display:inline-block; position:relative; font-size: 20px; color: black; &:hover{ color:white; background-color: black; box-shadow: 0px 10px 40px #3e3c3c7a; } i{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } } } } /* hover change */ .images__logo{ li{ width:170px; height:53px; padding: 5px 27px; border:1px solid transparent; transition:.5s; @media screen and(max-width: 576px) { width:140px; } &:hover{ border:1px solid; } img{ object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70%; } &.active{ border:1px solid; } } } .images__description{ >img{ max-width:180px; } transition: .5s; min-height: 250px; display:none; &.active{ display:block; } } </style> <script> $('.images__logo li').mouseover(function () { $('.images__logo li').removeClass('active'); var no = $(this).data('no'); console.log(no); $('.images__description').removeClass('active'); $('.data-'+no).addClass('active'); $(this).addClass('active') }); </script> <section class="pt-0"> <div class="container"> <ul class="ul__list text-center mb-5"> <li class="text-center images__description data-1 active"> <img src="https://via.placeholder.com/150" class="mb-3" alt=""> <h5 class="fw-1 lh-2">A new way to chat with your communities and friends. Discord is the easiest way to communicate over voice, video, and text, whether you’re part of a school club, a nightly gaming group, a worldwide art community, or just a handful of friends that want to hang out.</h5> </li> <li class="text-center images__description data-2"> <img src="https://via.placeholder.com/150" class="mb-3" alt=""> <h5 class="fw-1 lh-2">American business magazine. Published bi-weekly, it features original articles on finance, industry, investing, and marketing topics. Forbes also reports on related subjects such as technology, communications, science, politics, and law</h5> </li> <li class="text-center images__description data-3"> <img src="https://via.placeholder.com/150" class="mb-3" alt=""> <h5 class="fw-1 lh-2">At Jacobs, we make the world smarter, more connected and more sustainable. Together, we’re pushing the limits of what’s possible. We stay ahead to create the new standards our future needs.</h5> </li> </ul> <ul class="ul__list--inline images__logo text-center"> <li class="mr-3 mb-3 mb-sm-0 mr-md-5 p-3 pointer position-relative active" data-no=1><img src="https://via.placeholder.com/100" alt=""></li> <li class="mr-3 mb-3 mb-sm-0 mr-md-5 p-3 pointer position-relative" data-no=2><img src="https://via.placeholder.com/100" alt=""></li> <li class="p-3 mb-3 mb-sm-0 pointer position-relative" data-no=3><img src="https://via.placeholder.com/100" alt=""></li> </ul> </div> </section>
  2. Hi Guys. This is my first post here so apology in advance (if forum rules being ignore or posted into wrong category). I am trying to display elements on div hover. I had watched a lot of tutorials and practice a lot but still i am struggling with my problem that's why i come here so maybe someone (a Hero) help me. Even sort of direction mean a lot for me Explanation: Actually i am trying to create a something like Character Selector UI in case if you're looking some reference. I want to display hidden content at class="outputr1". If i hover img 1 then it show only hover content 1. And if i hover img 3 then it show hover content 3 and so on. I also want when i hover any div then it should stay active as difficult unless i hover other div like img 1, 2 or 3. it took a month but still i haven't figure it out howto achieve this. what i am missing? <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"><img src="1.png" width="100px" height="100"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"><img src="2.png" width="100px" height="100"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"><img src="3.png" width="100px" height="100"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </div> </body> </html> Sorry about my good English. I am really new to this stuff so i am spending most of my quarantine time in web development skills
  • Create New...