i am having a problem with the on :hover the tooltip is supposed to visible, but it does not happening .I am using only CSS no js included.Need help.
Thank you in advance...:)
here is my css :
.tooltip{
position: relative;
opacity: 0;
padding: 10px;
background: #9B59B6;
border-radius: 5px;
-webkit-transition:all 0.2s ease-in;
-moz-transition:all 0.2s ease-in;
transition:all 0.2s ease-in;
}
HTML :
<div class="wrapper">
<span class="tooltip">Hello ! This is tooltip....</span>
Hover Me !
</div>
You need some code to actually trigger the animation.
In my example below, I have nested the <span> inside the <a> in order to use :hover.
<div class="wrapper">
<a href="#" class="show">
Hover Me !
<span class="tooltip">Hello ! This is tooltip....</span>
</a>
</div>
a:hover span {
opacity:1;
}
http://jsfiddle.net/6RV5n/
EDIT:
Here's the same concept but using a CSS adjacent sibling selector so as not to nest the elements:
<div class="wrapper">
Hover Me !
<span class="tooltip">Hello ! This is tooltip....</span>
</div>
a.show:hover + span.tooltip {
opacity:1;
}
http://jsfiddle.net/7pT8Y/3/
Keep in mind that CSS sibling selectors may not work in older version of IE.
If you need to display the tooltip while the user hovering on the div wrapper..
Use the following CSS.
.wrapper:hover > .tooltip{
opacity: 1;
}
Check this... http://jsfiddle.net/TsQB5/
[EDITED]
.tooltip{
display:none;
}
.show:hover > .tooltip{
display: block;
}
This can solve the problem..
Related
When I hover over my #icon div, an image appears. When I remove the mouse from #icon the image disappears.
THE PROBLEM
If I hover over the space where the image will appear if I hover over #icon, the image appears. I've tried anything, so I really hope you can help.
I need to remove all hover effects on my #image-divs
HTML
<div id="box">
<div id="icons1">
<div id="image1"></div>
</div>
<div id="icons2">
<div id="image2"></div>
</div>
<div id="icons3">
<div id="image3"></div>
</div>
<div id="icons4">
<div id="image4"></div>
</div>
</div>
CSS EXAMPLE
#box #icons1 #billede1 {
height: 450px;
width: 1000px;
margin-left: -186%;
margin-top: 150px;
background-image: url(../html_css/billeder/1.jpeg);
background-position: center;
background-size: cover;
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
}
Use pointer-events:none
div{pointer-events:none}
div:hover{color:red;}
<div>Hover over me</div>
best way is to use pointer-events:none;
#image-divs{
pointer-events:none;
}
Notice that you to specify every hover for every div while you are using id's, you need to specify the hover effect for every div, now you should use this :
#image1{
display:none;
}
#icons1:hover #image1
display:block;
}
this means, whenever you hover the icon1, image1 will be displayed, and so.
you can also try the opactiy:0; and opacity:1;
hi i want to make a effect like this to my div on a hover:
website with the effect, hover over the people div's to see
I have tried to make a grid but I am strugling to get the hover effect on top of the div.
my codepen link, need the hover on the blocks
You'll need a container div and at least one foreground div to cover the background (could be just an image). Then you'll want to target the parent on hover and change the foreground child. I used transform instead of animating a position property because it's more performant.
.card{
position:relative;
width:200px;
height:200px;
border:1px solid blue;
overflow:hidden;
}
.card > div{
height:100%;
width:100%;
}
.card .foreground{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
transform:translateX(100%);
background-color:blue;
transition:.5s ease;
}
.card:hover .foreground{
transform:translateX(0);
}
<div class="card">
<div class="foreground"></div>
<div class="background"></div>
</div>
You can attach styles to a div by using the :hover keyword.
Example, you want to change some effect on the div on hover:
div:hover {
background-color: black;
}
You want to change some effect on a child, on parent hover
div:hover .child {
background-color: black;
}
EDIT
Ok, check the class changes when you force hover on their page, their original element has these styles:
z-index: 200;
content: "";
height: 263px;
width: 102px;
background-color: #91c6c2;
display: inline-block;
position: absolute;
top: 0px;
right: -50px;
-webkit-transform: skew(21deg);
transform: skew(21deg);
-webkit-backface-visibility: hidden;
-webkit-transition: right 0.5s;
transition: right 0.5s;
On hover, they just change the elements "right", to 80px, which makes it float in via the mentioned transition, "transition: right 0.5s".
you require a overlay effect on hover of a div.
Please refer this link
<div id="overlay">
<span id="plus">+</span>
</div>
CSS
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px;}
Found this in google search and also lots of plugins are avila
This may not be the most efficient way but it was most definitely the easiest that I've found. You can add the absolute position to the hidden div to make it on top of the image if you so choose!
HTML:
<div id='backgroundImg' onmouseover="hoverOver('show');" onmouseout="hoverOver('hide');">
<div id='hiddenDiv'>
</div>
<img src='myImage.png'>
</div>
Javascript:
<style>
function hoverOver(type) {
if (type=='show') {
document.getElementById('hiddenDiv').style.display='inherit';
} else {
document.getElementById('hiddenDiv').style.display='none';
}
}
</style>
Ok I tried to set the text in a span and when the div (consisting of the image and the text in it) was scrolled over it would set the span opacity to 0. It is not working though, and here is my code.
HTML
<div id="phild">
<td class="bio"> <img class="bio" src="phil.jpg" />
<span id="phils"><h2 id="philh">Phil</h2></span>
</td>
</div>
CSS to make the image opacity:1 when hovered
div#phild :hover{
opacity: 1;
transition: all .2s linear;
}
CSS to make the text opacity:0 when the entire thing (image and text) is hovered over
div#phild:hover span#phils{
opacity:0;
}
If the text is on top of the image, you can't use img:hover for your desired effect because when your cursor is on the text, it doesn't register as hovering the image. You could put the image and text inside something, and then have the text disappear when the parent is hovered
.bio {
position:relative;
float:left;
}
.bio img {
display:block;
}
.bio span {
position:absolute;
bottom:0;
left:0;
transition: all .2s linear;
}
.bio:hover span {
opacity:0;
}
<div class="bio">
<img src="http://placehold.it/100x100" />
<span>Text</span>
</div>
So long as youselectors are correct, the following should work all the way back to IE 6:
img.bio:hover{
opacity: 1; /* css standard */
filter: alpha(opacity=100); /* internet explorer */
}
There a number of ways to do this. Assuming your text follows your img element, you can use the hover pseudo-class and adjacent sibling selector to target the text and apply your CSS.
div {
position: relative;
display: inline-block;
}
.bio {
position: absolute;
top: 50%;
text-align: center;
width: 100%;
}
img:hover + .bio {
opacity: 0;
}
<div>
<img src="http://placehold.it/200x200" />
<span class="bio">Text Here</span>
</div>
I am trying to create an event with just CSS that will have a DIV (which is coloured white) turn from 0.6 opacity to 1.0 opacity when I hover over a separate div, so much so that when I hover over one div the other looks as if it is faded out.
My code can work if I wanted the div I hover over to fade but I want to hover and change the other div not the one I am hovering over.
HTML
<div id="sell1">
<div class="s1"></div>
</div>
<div id="gap"></div>
<div id="sell2">
<div class="s2"></div>
</div>
CSS
#sell1 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#sell2 {
height:100px;
width:100%;
background-color: rgb(50,70,130);
}
#gap {
height:50px;
background-color:white;
}
.s1, .s2 {
width:100%;
height:247px;
position:absolute;
background:rgba(255, 255, 255, 0.6);
opacity:0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
}
#sell2:hover .s1 {
opacity:1;
}
http://jsfiddle.net/UgsyL/186/
So here I want to hover over the "sell2" div and have .s1 turn from 0.6 to 1.0 opacity.
Any help?
With your current setup of HTML, that's impossible. However, as LinkinTED pointed out, it's possible to hover #sell1 and make .s1 fade, by styling #sell1:hover ~ #sell2 .s2 { ... }.
If you need only to hover #sell2 and change .s1, you can switch their places in the HTML, making it:
<div id="sell2">
<div class="s2"></div>
</div>
<div id="gap"></div>
<div id="sell1">
<div class="s1"></div>
</div>
And then style the divs with relative and absolute positioning to be switched, as well as styling the hover with the code provided by LinkinTED.
This isn't THE answer to the question I asked originally but it is a work around I finally figured out that works for what I am wanting to do.
HTML
<ul>
<li><div></div></li>
<br/>
<li><div></div></li>
</ul>
CSS
div {
background-color: rgb(40,80,120);
height: 100px;
width: 200px;
}
ul li {
display: inline-block;
}
ul li div {
opacity: 1;
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
transition: opacity .5s;
}
ul:hover li div {
opacity: .5;
}
ul:hover li div:hover {
opacity: 1;
}
http://jsfiddle.net/xbMtN/7/
Heres where I'm at:
http://codepen.io/qdarkness/pen/FyIJh
Ideally, how I imagine it at least, is when a user hovers over the <a> that the <div>'s "img-holder" and "tag" both have a transition to color, with the "img-holder" showing a "+" in the middle.
I'm suspecting the fact that I have the <img> inside the <div> that it is not working properly, but I am using that div to constrain the img width and height.
I'd prefer not to add additional divs, is this possible by just apply a class, like i attempted to, to the <div>?
HTML:
<li class="b c d">
<a href="" class="link">
<div class="img-holder overlay"><img src="img/test.jpg"></div>
<div class="tag overlay">
<h3>test</h3>
<h4>test</h4>
</div>
</a>
</li>
CSS:
.img-holder {
width: 235px;
height: 195px;
overflow: hidden;
}
.tag {
clear:both;
position:relative;
float:left;
width: 100%;
overflow:hidden;
background-color: #FFF;
text-align: center;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
a:hover .overlay {
background: #909090;
z-index: 301;
}
OK, I THINK I have an understanding of what you want to do...
I've forked your Codepen sketch: http://cdpn.io/uzfrk
Main points are to position the overlay absolute over your image (relative to .link), and then transition opacity to have it appear.
<old example removed>
UPDATED: fresh sketch with cleaned up markup and styling. Simple example for your purposes.
Codepen sketch here: http://cdpn.io/zhBcA
The main point is the direct child selector to target elements related to your container.
figure:hover > figcaption {
background: #ccc;
}
figure:hover > .overlay {
opacity: 0.85;
}
Let me know if this is what you are looking for.
Could this be what you want? It's just a simple approach.
UPDATE:
Covering text area now.
http://codepen.io/anon/pen/tlKCJ