Jump to content

Display Hidden element when hovering


bilz636

Recommended Posts

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

 

 

 

 

Link to comment
Share on other sites

I am unclear of your request, so this is just an attempt toward a solution.

First, move the height and width definitions in the <img> tags to the CSS section. 
Also, be consistent in using the 'px' notation which is not used in the tag portions.

Second, change

.myDIV:hover + .hide {

to

.myDIV:hover .hide {

to get the effect I think you desire.

Finally, I don't know what is to happen with the displays of the first and last <div> elements.
You hide the second with the '.hide' class, but you show the first when you don't have any definition to hide it.
What are you trying to do here.

<!DOCTYPE html>
<html>
<head>
<title>Display Hidden Content OnhoverEvent</title>
<!-- From: http://w3schools.invisionzone.com/topic/61228-display-hidden-element-when-hovering/ -->

<style>
body {
  padding: 50px 10px;
  margin: 0 auto;
  max-width: 900px;
}
.hide {
  display: none;
}
.myDIV:hover .hide {
  display: block;
  color: red;
}
img { display: inline-block;
      height: 100px;
      width: 100px;
}
</style>

</head>
<body>

<div class"outputr1"> I want to display Hidden/hover content here </div>
<br><br>

<div class="myDIV">
 <img src="1.png" alt="1.png">
 <div class="hide"> Hover content 1 </div>
</div>

<div class="myDIV">
 <img src="2.png" alt="2.png">
 <div class="hide"> Hover content 2  </div>
</div>

<div class="myDIV">
 <img src="3.png" alt="3.png">
 <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>
  
</body>
</html>

Note: I don't have a reference to your '.png' image files so I just inserted an "alt=xxx" attribute as a place holder.
Always a good idea to include description of the images in case they are not show for some reason.

 

BTW, welcome to the forums.

 

  • Like 1
Link to comment
Share on other sites

Quote

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

You will need javascript to apply class to keep it active for current div mouseover, and then clear any already active class existing anywhere else but current.

Link to comment
Share on other sites

On 4/9/2020 at 9:34 PM, JMRKER said:

I am unclear of your request, so this is just an attempt toward a solution.

First, move the height and width definitions in the <img> tags to the CSS section. 
Also, be consistent in using the 'px' notation which is not used in the tag portions.

Second, change

.myDIV:hover + .hide {

to

.myDIV:hover .hide {

to get the effect I think you desire.

Finally, I don't know what is to happen with the displays of the first and last <div> elements.
You hide the second with the '.hide' class, but you show the first when you don't have any definition to hide it.
What are you trying to do here.


<!DOCTYPE html>
<html>
<head>
<title>Display Hidden Content OnhoverEvent</title>
<!-- From: http://w3schools.invisionzone.com/topic/61228-display-hidden-element-when-hovering/ -->

<style>
body {
  padding: 50px 10px;
  margin: 0 auto;
  max-width: 900px;
}
.hide {
  display: none;
}
.myDIV:hover .hide {
  display: block;
  color: red;
}
img { display: inline-block;
      height: 100px;
      width: 100px;
}
</style>

</head>
<body>

<div class"outputr1"> I want to display Hidden/hover content here </div>
<br><br>

<div class="myDIV">
 <img src="1.png" alt="1.png">
 <div class="hide"> Hover content 1 </div>
</div>

<div class="myDIV">
 <img src="2.png" alt="2.png">
 <div class="hide"> Hover content 2  </div>
</div>

<div class="myDIV">
 <img src="3.png" alt="3.png">
 <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>
  
</body>
</html>

Note: I don't have a reference to your '.png' image files so I just inserted an "alt=xxx" attribute as a place holder.
Always a good idea to include description of the images in case they are not show for some reason.

 

BTW, welcome to the forums.

 

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>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...