Jump to content

Display Hidden element when hovering


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...