so im trying to make a button on my site that when hovered will make the content of the page have 0 opacity. this is my code
#wrapper{
box-shadow:0 0 15px rgba(0,0,0,1);
position:relative;
width:960px;
height:auto;
margin:0 auto;
transition:opacity 1s;}
#wrapper:after{
width:100px;
height:100px;
cursor:;
background:rgba(0,0,0,1);
content:'';
display:block;
left:-200px;
z-index:10000;
position:absolute;
top:-50px;
border-radius:150px;}
#wrapper :after :hover{
opacity:0;}
but it wont seem to work, anyone have any ideas or will it just not work?
Use jquery:
$('.button-class').hover(function(){
$('body').css({'opacity' : '0'});
}, function(){
$('body').not(this).css({'opacity' : '1'});
});
Make sure you have a js file though
Try
#wrapper
{
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
#wrapper:hover
{
opacity:0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}
Your css some wrong Correct to this
Used to this #wrapper:hover:after This is write
Not this #wrapper :after :hover This is wrong
#wrapper:hover:after {
background:rgba(0,0,0,0);
}
Demo
Related
I'm trying to increase the duration of CSS :active and found this thread How to increase the duration of :active in css? I tried this but it didn't work on my code.
here my code:
li {
transition:0s 1s;
}
li:active:before {
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:0s;
}
<li>Style This</li>
the :active rule will stop matching as soon as the mouse button is released. thus the :before will be removed.
You could render the block, and not display it until the :active starts matching.
caveat: If the :before block is clicked, its parent will also become active.
In the end, I would opt for a JavaScript solution.
li {
transition:0s 1s;
}
li:before{
content:"hello !";
z-index:99999999;
position:fixed;
bottom:0px;
width:100%;
background:black;
text-align:center;
color:white;
padding:10px 0;
transition:1s;
opacity:0;
}
li:active:before {
display:block;
opacity:1;
transition:0s;
}
<li>Style This</li>
The trick won't work as you expect simply because there is no transition applied to the li element.
You need first to understand how it works. Here is a simple example:
.box {
background:red;
height:200px;
transition:0s 1s;
}
.box:active {
background:green;
transition:0s;
]
<div class="box"></div>
When you click, the active state is considered; thus the transition is set to 0s and the background become immediately green. When you release the mouse, the active state is no more considered and we have the new transition with a dely so the the background go back to red after this delay.
So in order to have such think, you may consider doing the same but with the pseudo element:
li:before {
content: "hello !";
z-index: 99999999;
position: fixed;
bottom: 0px;
width: 100%;
background: black;
text-align: center;
color: white;
padding: 10px 0;
opacity:0;
transition: 0s 4s;
}
li:active::before{
opacity:1;
transition: 0s;
}
<li>Style This</li>
I considred opacity but it can work with any animatable property.
I am making my first steps learning html, css and php. I made some courses on internet and now I decided to make a site using Wordpress so I can continue learning from the practice.
The thing is that I made a page with a custom field for a video and a custom field for a description.
As you can see in the picture I'm hiding all the text of the description using a details tag called About in html.
When I click on about I see this:
And there is my question:
How can I hide some elements when other elements are displayed? I would like to open this page and only see the text and a close button. It means that when details is open, the page should not display the "menu" link and the "strange magic" title.
I already tryied this but it doesn't work:
details[open] .entry-title .menu-toggle{
display: none;
}
Do you have some suggestion? It is something possible to do using css?
I think you should try this, maybe it will help you..
label {
display:block;
margin:20px 0 10px 0;
}
label:hover {
text-decoration:underline;
}
input {
position:absolute;
left:-999em
}
.hide {
width:50%;
border:1px solid #000;
background:rgba(148, 148, 148, 0.33);
box-shadow: 3px 3px 10px;
max-height:999em;
opacity:1;
height:auto;
overflow:hidden;
transition:opacity .5s linear;
}
.hide p {
padding:10px;
margin:0
}
input[type=checkbox]:checked + div {
opacity:0;
max-height:0;
border:none;
transition:opacity .5s linear, max-height .5s linear;
}
.follow{
border-top:1px solid blue;margin:0;
}
Demo: https://jsfiddle.net/Pratik_009/t41nn2nh/
I have a div that I want to pop up when I hover over the link before it. The hover works great, but there is a link inside the div that appears that I want people to be able to click but it disappears when I try to go to it.
Here is the jsfiddle
I am trying to use just CSS here but if I need any jquery or anything then cool.
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo + div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover + div {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
<p id="soldoutinfo">
<sup><a>?</a></sup>
</p>
<div>
<p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.
</p>
</div>
The problem is that the hover effect is on the element after the anchor. So when you leave the anchor, your hover effect will end to.
You could fix it like this, although it's not the cleanest solution:
Set your tooltip inside your anchor, using a span
<p id="soldoutinfo">
<sup><a>?</a></sup>
<span>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</span>
</p>
#soldoutinfo span {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover span {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 19px;
left:12px;
z-index:1000;
}
JSFiddle DEMO
Edited your fiddle:
http://jsfiddle.net/s8QWY/6/
See if this works for you. Basically what I did was this:
Make the hidden div be inside the div that you have to hover over to get it to show.
Make the position of the parent div relative
Make the position of the shown div be over where the hovered element so that the div still shows when you hover over the div itself.
<div id="soldoutinfo"><sup><a>?</a><div><p>Hope is not lost! Send us a message and we will see if our stores have any in stock to ship to you.</p></div></sup></div>
#soldoutinfo a {
padding:4px 2px;
font-size:10px;
}
#soldoutinfo, .soldout {
display:inline;
position: relative;
}
#soldoutinfo a {
color:#cc0000;
}
#soldoutinfo a:visited {
color:#cc0000;
}
#soldoutinfo div {
display:none;
width:0;
height:0;
position:absolute;
}
#soldoutinfo:hover div,
#soldoutinfo div:hover {
display:block;
height:60px;
width:250px;
background:#ffffff;
box-shadow: 0 0 4px #888888;
position: absolute;
padding: 8px;
top: 3px;
left:3px;
z-index:1000;
}
#soldoutinfo + div p {
font-size:12px;
}
Here a approach point:
When you hover the ?
$("#id").hover(function(){
$(this).find("#toShow").show();
}
and when he leaves the #toShow
$('#toShow').mouseout(function() {
$('#toShow').hide();
});
I see no JS code in this fiddle I don't know why. But solution to you would be to use setTimeout(); in this function you can specify after what period of time after hover the box should be hidden. You can also add to hide() param 'slow'.
You can also use ready solution which is Jquery UI ToolTip
I am trying to give the #page div an inner border that is in line with the grey border around the top part: http://www.designated.net.au/testbed/testpage/
I realise I could just add another div, but that is not the solution I'm looking for as there will be other content within #page. Is this possible?
This follows on from this question: Border-box CSS not working properly
If you don't mind it not working in older browsers you could just use a .box-shadow. This can be done without having to add extra markup. You could also use :before or :after pseudo css classes as well but box-shadow is cleaner IMO.
-webkit-box-shadow(inset 0 0 1px #000);
-moz-box-shadow(inset 0 0 1px #000);
-o-box-shadow(inset 0 0 1px #000);
box-shadow(inset 0 0 1px #000);
You can leverage the relative positioning you are already using to align your images with the border.
Example: http://jsfiddle.net/zbrcb/
Merge these definitions with your existing definitions.
#page {
border: 10px solid #333;
}
#spotlight-main-top-left { z-index:3; position:relative; float:left; width:40px; height:40px; left: -10px; top: -10px; }
#spotlight-main-top-top { z-index:2; position:relative; width:100%; height:10px; background-color:#333333; top: -10px; }
#spotlight-main-top-right { z-index:3; position:relative; float:right; width:40px; height:40px; right: -10px; top: -10px; }
#spotlight-main-top-title { z-index:3; position:relative; margin:0 auto; width:200px; height:30px; top: -10px; }
#spotlight-main-top-title-left { position:relative; float:left; width:30px; height:30px; }
#spotlight-main-top-title-right { position:relative; float:right; width:30px; height:30px; }
#spotlight-main-top-title-middle { position:relative; margin:0 30px 10px; width:140px; height:20px; background-color:#333333; }
#spotlight-main-top-title-text { position:relative; width:140px; height:18px; text-align:center; }
​Works in Chrome, FF, Safari, IE 8/9 (7 could probably be made to work as well; your header is misaligned in IE7 even without this change).
Personally, I would try to reduce the number of elements you are using to create the top of the site, but to be fair it works fine.
You can look here:
http://jsfiddle.net/vsjwww/n7kk3/17/
It all works fine, but as you see, the div, which will slide down, starts slide above the other div.
It looks like a CSS problem, how can we solve it?
Thanks..
Demo
You need the dropdown div to have the following css:
#will_slideDown
{
position:absolute;
top:100%;
left:0px;
}
and #has_hover_function needs position:relative;
Absolutely position the inner element at the bottom border of the outer element:
#has_hover_function, #will_slideDown
{
position:relative;
width:150px;
height:25px;
font-family:Arial;
text-align:center;
padding-top:3px;
border:1px solid gray;
background-color:#e7e7e7;
}
#will_slideDown {
position:absolute;
top:29px; /* 1px + 3px + 25px; */
left:0;
}