ok it's supposed to be really simple but for some reason it isn't working. when i hover over an image a box with information is supposed to pop up like when you hover over a question mark and the question is answered.
.infodot {
position: relative;
}
.redinfo {
background-color: red;
color: white;
padding: 10px;
border-radius: 5px;
position: relative;
width: 280px;
display:none;
}
.infodot:hover .redinfo {
display: block;
}
<img src="http://www.brokenarrowwear.com/embroidery/img/infodot.png" class="infodot" />
<p class="redinfo"><strong>PLEASE NOTE</strong> - Info dot information</p>
You need 'next sibling', actually: adjacent sibling selector:
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
.infodot:hover + .redinfo {
display: block;
}
Demo: http://jsfiddle.net/d1taznfb/
Another option is to change your markup, so you can use different selector(s).
Related
Searching I can only find javascript/jquery solutions, isn't there any way to do it purely with css?
#UserMenu.block {
display: block;
}
#UserMenu {
font-size: 16px;
padding: 15px;
display: none;
background: #333;
position: absolute;
left: 10px;
width: 200px;
}
#UserMenu a {
color: #24A9D8;
display: block;
position: relative;
padding: 5px 10px;
}
You can test it here:
http://jsfiddle.net/hLch3jku/
You can use checkbox for trick. Put a label and checkbox in it. Put your other elements. And when checkbox is checked hide your elements with css. But this is a cheap trick, better use javascript.
Is there a simple way to reverse the colour order when hovering?
Using this trick here I have the order right > left:
&:hover,
&:hover ~ button {
color: red
}
The fiddle with the right > left: https://jsfiddle.net/celio/Lowc1ruh/
Example with the left > right: https://css-tricks.com/examples/StarRating/
It is impossible for me to use float, position: absolute; and anything that changes the right order of my current html.
Plain CSS example:
button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
button:before {
content: "ā";
font-size: 5rem;
line-height: 1;
}
button:hover,
button:hover ~ button {
color: red;
}
<div class="wrapper">
<button></button>
<button id="2"></button>
<button></button>
<button></button>
<button></button>
</div>
One way would be to make all the child button elements color: red; when hovering over .wrapper. Then use the sibling selector (~) to change any elements after the currently hovered element to color: black;.
You should remove any whitespace between the elements (in this case I put them into one line in the HTML) to ensure that the cursor is always hovering over a star.
Example with plain CSS:
.wrapper button {
margin: 0;
padding: 5px;
border: none;
background: transparent;
display: inline-block;
}
.wrapper button:before {
content: "ā";
font-size: 5rem;
line-height: 1;
}
.wrapper button:hover ~ button {
color: black;
}
.wrapper:hover button {
color: red;
}
<div class="wrapper">
<button></button><button id="2"></button><button></button><button></button><button></button>
</div>
JS Fiddle using SASS
How can I make this tabs script: FIDDLE work like this: DEMO
I want to switch social tabs between each other but it doesn't work.
Where did I made a mistake?
a[name="tab1"] + .facebook_box {
display: block
}
:target + .twitter_box {
display: block
}
:target ~ a[name="tab1"] + .facebook_box {
display: none
}
** UPDATE: This is a duplicate of this question **
Here are the changes to make it work:
First a small bug: close the anchor tag like this: </a> not like this <a/>.
Then change the order of your articles:
<div class="tab-content">
<a name="tab2"></a>
<article class="twitter_box">t</article>
<a name="tab1"></a>
<article class="facebook_box">f</article>
</div>
Then delete the ".social_slider .tab-content" before the ".facebook_box" or add it also to the lines doing the magic otherwise you overwrite the magic with the more precice definition of your class.
And then you need to increase the size of your link inside the tab, otherwise you only click on the label, not the anchor.
.facebook_box {
border-radius: 8px;
background-color: #fff;
position: relative;
z-index: 99998;
display:none;
height:300px;
border:10px solid #3a93d6;
}
.twitter_box {
border-radius: 8px;
background-color: #19bfe5;
position: relative;
z-index: 99998;
display:none;
height:300px;
border: 10px solid #68c2ff;
}
.twitter_icon > a, .facebook_icon > a{
display: block;
height: 100%;
width: 100%;
}
I'm trying to trigger a div from display:none; to display:block; when a link is hovered. I've tried to achieve the reaction through an adjacent sibling selector but the target div doesn't change from none to block. I think it's because I'm not defining the correct hierarchy, but I have no idea what else to try.
<div id="home_bar">
<div id="welcome_left">
Iām Anthony.
</div>
<div id="welcome_right">
<div id="name_desc">I love lamp.</div>
</div>
</div>
The above HTML is powered by the following CSS:
#home_bar {
display: table-row;
width: 888px;
border: 1px solid red;
margin-top: 80px;
}
#welcome_left {
letter-spacing: -1px;
font-size: 36pt;
line-height: 36pt;
width: 666px;
color: #606060;
cursor: default;
display: table-cell;
float: left;
}
#welcome_right {
float: right;
width: 200px;
display: table-cell;
position: relative;
}
#name:hover { color: #00A68D; cursor: default; }
#name_desc {
top: 50px;
position: absolute;
display: none;
}
#name:hover + #name_desc { display: block; }
I previously tried the following as the last line:
#home_bar > #name:hover + #name_desc { display: block; }
As that seemed like the right course of action based on this question, but I still can't achieve the desired affect (to be clear, the desired effect is: hover a link on the left, trigger the appearance of content on the right).
Any thoughts with regards to what I could be doing differently here? I'm hoping to avoid jQuery if I can as I'm normally a lot more comfortable working with CSS, but I'm completely stuck.
The adjacent sibling combinator has to be used with sibling elements. In this instance, #welcome_left and #welcome_right are the siblings. Therefore, when #welcome_left is hovered over, you will select the sibling #welcome_right's child element #name_desc.
EXAMPLE HERE
#welcome_left:hover + #welcome_right #name_desc {
display: block;
}
Unfortunately, you can't use the following, because #name and #welcome_right are not sibling elements. In CSS, you currently can't transverse the DOM, therefore there aren't any parent selectors.
#name:hover + #welcome_right #name_desc {
display: block; /* doesn't work because they aren't siblings .. */
}
I'm trying to make custom checkboxes with CSS3, which is working great on Chrome. On Firefox... not so much.
Edit: it seems to be working fine on Firefox 37.
The answer below is still relevant, but the style related issues from mid 2013 are resolved.
IE support isn't mentioned here but edits/answers regarding it are welcome.
demo
The HTML:
<input type="checkbox" id="first"/>
<label for="first">This is pretty awesome</label>
The CSS:
input[type=checkbox] {
appearance: none;
background: transparent;
position: relative;
}
input[type=checkbox]::after {
position: absolute;
top: 0;
left: 0;
content: '';
text-align: center;
background: #aaa;
display: block;
pointer-events: none;
opacity: 1;
color: black;
border: 3px solid black;
}
input[type=checkbox] + label {
line-height: 48px;
margin: 0 15px 0 15px;
}
input[type=checkbox]:hover::after {
content: '';
background: #32cd32;
opacity: .3;
}
input[type=checkbox]:checked::after {
content: '\2713';
background: #32cd32;
}
input[type=checkbox]:checked:hover::after {
opacity: 1;
}
input[type=checkbox],
input[type=checkbox]::after {
width: 48px;
height: 48px;
font-size: 46px;
line-height: 48px;
vertical-align: middle;
border-radius: 50%;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Note: I removed vendor prefixes, and things like user-select for brevity. The full code is in the pen.
What do I need to change to have it look the same on Firefox as it does on Chrome?
Desired:
Not desired:
You can enable custom styles for checkbox specifically for mozilla browser by adding this property and it worked for me.
-moz-appearance:initial
I managed to fix it as much as seems possible (I'd still love a better solution, if one exists). I switched all of the selectors from
input[type=checkbox]::after
to
input[type=checkbox] + label::after
Downside:
requires a label
But:
HTML requires input elements to have a label
Conclusion:
only bad for invalid HTML
doesnt technically need a LABEL, but does need control over the mark up to ensure there is a target-able sibling immediately after the checkbox.
i.e.
input[type=checkbox] + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
input[type=checkbox]:checked + span::after{
display:block;
width:50px;
height:50px;
background:yellow;
display:block;
}
<input type="checkbox"></input>
<span class="targetMe"></span>
target the span using the sibling selector and :after elements as above.
Might as well put in a label tho at this point... :P
The problem is that :after and ::after technically create an element as the last child of the element the pseudoselector is applied to. Firefox doesn't like to create children inside of its checkboxes. This is actually part of a bigger topic which is replaced elements.
You will see the same issue with the :before and ::before pseudoelements not working on checkboxes because they would create elements as a first child element within the element being selected.