I am trying to make a box appear when the user hovers over a separate box. I am having trouble getting it to work.
Here is the html
<div class="division_left" id="account">
<div class="container"></div>
<span>Account</span>
</div>
and here is the css
#account:hover + .container {
visibility: visible;
}
.container {
position: absolute;
visibility: hidden;
height: 300px;
width: 500px;
bottom: 40px;
left: 40px;
background-color: #fff;
border: 1px solid #000;
}
again I am trying to get the container to show when #account is hovered over. It just is not showing up. Thanks in advance!
The element #account is a parent of .container rather than its sibling - you need the 'direct descendant' selector, >, rather than the 'adjacent sibling' selector, +, i.e.
#account:hover > .container {
visibility: visible;
}
Instead of
#account:hover + .container {
visibility: visible;
}
Support for the 'direct descendant' selector is as follows:
IE 7, IE8, IE9 pr3, FF 3.0, FF 3.5, FF 3.6, FF 4b1, Saf 4.0 Win, Saf
5.0 Win, Chrome 4, Chrome 5, Opera 10.10, Opera 10.53 and Opera 10.60
Live example
This is what you're after DEMO http://jsfiddle.net/kevinPHPkevin/wNdBw/
div {
display: none;
}
a:hover + div {
display: block;
}
.container isn't a sibling of #account its a child so you need to instead use the direct child combinator >
#account:hover > .container
jsFiddle
Why not use JQuery Hover function instead? Much better and stable than anything else. you can play with effects as well.
HTML :
<div class="division_left" id="account">
<div class="container" style="display:none"></div>
<span id="showAccount">Account</span>
</div>
JQuery :
$('#showAccount').hover(function(){
$('.container').toggle('fade');
});
This will give you much better effect than regular CSS.
Try it and let me know..
Or I will add JSFiddle if you need.
Update : http://jsfiddle.net/V8QbY/ - Here it is
Regards,
Rahul.
Related
So I have a range input with the css rules shown below. The goal is to have only the thumb of the range respond to pointer events. Works fine in Chrome and Safari. But in ie-11 and Edge, the entire input stops working. I know that pointer-events is experimental, but I also know it is supported in both of those browsers, but maybe not for pseudo-elements?
input[type="range"] {
pointer-events: none;
}
input[type="range"]::-webkit-slider-thumb {
pointer-events: auto;
}
input[type="range"]::-ms-thumb {
pointer-events: auto;
}
First, please refer to the following sample:
<style>
.bottom {
background: yellow;
width: 600px;
height: 200px;
}
.top {
width: 600px;
height: 200px;
position: absolute;
top: 0;
left: 0;
/*pointer-events: none;*/
}
.test{
/*pointer-events: none;*/
}
div{
display:block;
}
</style>
<div>
<!-- bottom div -->
<div class="bottom">
<br>
<input type="range"/>
<br>
<input type="range" class="test"/>(pointer-events: none)
<br>
</div>
<!-- top div -->
<div class="top">
</div>
</div>
In this sample, because the top div is on the top of the range element, so we can't select range (using IE, Microsoft Edge and Microsoft Edge(Chromium)).
After adding the pointer-events: none; in the top class, they are able to select.
Then, if we add the pointer-events: none; for the second range element, in IE browser and Microsoft Edge (chromium), the second range input can't be selected. But in Microsoft Edge (Microsoft Edge 41.16299.1480.0), it is still can be selected. It seems that this is the Edge browser default behavior or issue, I will feedback this issue. So, you could consider to use this method to add top div.
Second, since the new Microsoft Edge is chromium based, you could try to install the new Microsoft Edge and use it.
Besides, I think there have another choice, you could use JQuery script to find the range input elements and use the disabled property to enable/disable it.
$("input[type='range']")[1].disabled = true; //disable
JSFiddle
When you click the button, you see that :active pseudoclass is triggered for the parent div. Is there a pure CSS (or some JS library) way of :active pseudoclass not toggling on button click?
I tried z-index, position: absolute & fixed and no success.
From the spec:
Selectors doesn't define if the parent of an element that is ‘:active’ or ‘:hover’ is also in that state.
That means it's implementation dependent. If an implementation chose to act this way (as current browsers obviously do), there's nothing in the standard that can change that.
With CSS4, you might be able to do:
.parent:active:not(:has(:active)) {
color: red;
}
but that is neither available nor finalized yet.
If you really want to solve this with CSS only:
If your button is active, add a :before-pseudo-element and with position: absolute; give the :before the same background as the parents.
button:active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #eee;
z-index: -1;
}
Now all that is needed is that the parent is :
position: relative;
z-index: 0;
Have a look: http://jsfiddle.net/s0at4w4b/4/
This does not solve the underlying issue, but is a solution for your current problem.
I don't think :has pseudo-class will ever be available in stylesheets. If browsers finally decide to implement it, it will probably be only for JS APIs like querySelector.
However, I have much more hopes for :focus-within, which seems much simpler to implement.
#parent:active:not(:focus-within) {
background-color: red;
}
Of course, it will only prevent :active from being applied to #parent when clicking a focusable element like a button. You can make other elements focusable by adding tabindex = "-1"
Sadly, :focus-within is not widely supported, but you can use a JS polyfill.
#parent {
border: 1px solid black;
width: 300px;
height: 300px;
}
#parent:active:not(.focus-within) {
background-color: red;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div id="parent">
<button>Click me</button>
<p tabindex="-1">Or me</p>
</div>
Github does not allow hotlinking, so the snippet above might not work unless you copy the polyfill to your server and use it.
Perhaps the simplest way of achieving what you probably really want to do is to put not put the button inside the div you don't want activated.
Here, you have a container div, which contains a background div (the equivalent of the parent div in your original example). The background div has an active state separate from the button's.
.container {
position: relative;
width: 200px;
height: 200px;
}
.background {
position: absolute;
width: 100%;
height: 100%;
border: 1px solid black;
background-color: #eee;
}
.background:active {
background-color: red;
}
button {
position: relative;
}
<div class="container">
<div class="background"></div>
<button>Click me!</button>
</div>
This may or may not work for you, but this is how I achieve it with pure CSS. The only caveat is the dependence of focus-within which isn't supported by IE or Edge.
.parent {
transition: background-color;
}
.parent:active:not(:focus-within) {
background-color: red;
transition-delay: 1ms; // Delay one cycle to allow child to focus
}
What's going on here is, the parent element will get the active state, as will the child that gets clicked. The only difference is that the focus will apply to the child element, but only on the next cycle. To circumvent any animations from while in this 2 step process, apply a 1ms delay. The next cycle, the element will be active, but the focus will be applied to the child. Thus, the parent will not apply the transition. I would imagine animation delay: 1ms would work the same way.
Another alternative is to give the item a tabindex=-1 attribute and use
.parent {
transition: background-color;
}
.parent:active:focus {
background-color: red;
}
The only issue with this is the fact it may change keyboard navigation behavior and relies on some HTML as well. If you do want keyboard navigation use tabindex=0 or any value besides -1. But there's no JS used.
There are some nice polyfills for focus-within that you can use for IE/Edge but that would go outside "CSS Only".
But, we can put both of them together to create this:
.parent {
transition: background-color;
}
.parent[tabindex]:active:focus {
background-color: red;
}
.parent:active:not(:focus):not(:focus-within) {
background-color: red;
transition-delay: 1ms;
}
This works on IE11, Edge, and Chrome.
http://jsfiddle.net/s0at4w4b/42/
here's a jquery solution instead of using the css pseudo class :active
$(document).ready(function() {
$('button').mousedown(function(e){
e.stopPropagation();
console.log('i got clicked');
});
$('div').mousedown(function(e){
$('div').css('background', 'red')
}).mouseup(function(e){
$('div').css('background', '#eee')
});
$(document).mouseup(function(e){
$('div').css('background', '#eee')
});
});
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<button>Qlick me</button>
</div>
As far as I know, the the active state will bubble up. So all parent nodes will have an active state.
Therefore, I don't now of a pure CSS solution. You can avoid a javascript solution (which I assume is what you're really after), by altering the markup so that the div that has an active state is no longer a parent of the button. You can make them siblings, for example.
The CSS part of that solution is then fixing the layout so it appears the same now that they are sibilings as what it did when they were parent>child.
Without seeing a fiddle of what you're working with, I can't offer you a more specific solution I'm afraid.
try this
html:
<div class="current" id="current">
<button id="btnclick" >Qlick me</button>
</div>
css script:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.current_active{
background-color: red;
}
jquery:
$("#btnclick").click(function(){
$("#current").toggleClass("current_active");
});
JSFiddle
ps: include the jquery library file
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.
There may be document language or implementation specific limits on which elements can become :active. For example, [HTML5] defines a list of activatable elements.
The parent of an element that matches :active also matches :active.
So there,s no way
Instead of div:active {...} you should code div:active:not(:hover) {...} and the background-color stays untouched.
(old snippet removed)
UPDATE
To keep the main div behaviour intact and a more generic approach I usually create several layers.
Check the snippet below, toggling to green is just to prove that it works while position and abolute are just quick and dirty for now:
#layer-data {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
#layer-data:active {
background-color: red
}
#layer-btns:active {
background-color: green
}
#layer-btns {
z-index: 1;
position: absolute;
top: 1px;
left: 1px;
background: transparent;
padding: 5px;
width: auto;
height: auto
}
#layer-data {
z-index: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 200px
}
<div id="layer-btns">
<button>Qlick me</button>
<br/>
<button>Qlick me too</button>
<br/>
<button>Qlick me three</button>
</div>
<div id="layer-data">
some data-layer
</div>
There doesn't seem to any CSS way to handle this case. (not sure about CSS4, the way Amit has suggested.) So here is JQuery way.
The idea is you handle mousedown and mouseup events at 3 levels:
the parent div
the button where you don't want the active state propagated to parent div (".btn1" in the example below)
any other children except the button in second condition. (".btn2" in the example below)
JS Fiddle
HTML:
<div>
<button class="btn1">Qlick me1</button>
<button class="btn2">Qlick me2</button>
</div>
JQuery:
$(function(){
$('div').each(function(e){
$(this).mousedown(function(e){
$(this).addClass("activeClass");
}).mouseup(function(e){
$(this).removeClass("activeClass");
});
});
$('div .btn1').each(function(e){
$(this).mousedown(function(e){
e.stopPropagation();
}).mouseup(function(e){
e.stopPropagation();
});
});
$('div :not(.btn1)').each(function(e){
$(this).mousedown(function(e){
$(this).parent().addClass("activeClass");
}).mouseup(function(e){
$(this).parent().removeClass("activeClass");
});
});
});
CSS:
div {
width: 200px;
height: 200px;
background-color: #eee;
border: 1px solid black;
}
.activeClass {
background-color: red;
}
CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript but now there's a method for getting them!
Check this:
http://davidwalsh.name/pseudo-element
http://davidwalsh.name/ways-css-javascript-interact
Problem Statement is as follows, suppose you have an header containing three elements:
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
Both logo and options have absolute withs of 220px and 294px respectively.
Elements layout arrangement is:
.logo { float:left; }
.search {float:left; }
.options { float:right; }
Now I want to make .search 100% of the window window - 220px - 294px).
The answer to this question should try to seek as answer that do not involve:
css calc function, like: .search{ width: calc(100% - 200px - 294px); }
javascript!
I thought about using a table and let the second td => 'search' calculate it's width automatically.
But seems overkill, to use a table for achieving this.
I'm curious about the answer. Don't bother making fiddles, half word is enough for me.
You can use margin for the search div:
.logo { float:left;width: 220px; }
.search {margin: 0 295px 0 221px;}
.options { float:right;width:294px;}
But for this, html markup should be ordered like this:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
#BhojendraCLinkNepal give a traditional solution which works on old browsers, but you have to change HTML structure. Another solution works on new browsers with flex.
<style>
body {display: flex; flex-direction: row;} /* or the header container */
.logo {width: 220px;}
.search {flex: 1;}
.options {width: 294px;}
</style>
<div class="logo">...</div>
<div class="search">...</div>
<div class="options">...</div>
See here for browser compatibility.
I thought about using a table and let the second td => 'search' calculate it's width automatically. But seems overkill, to use a table for achieving this.
right, but you could take benefit of display: table-cell (widely supported from all current browsers) without actually using a table
e.g.
<div id="wrapper">
<div class="logo">logo</div>
<div class="search">search</div>
<div class="options">options</div>
</div>
Css
#wrapper { display: table; width: 100%; }
#wrapper > div { display: table-cell; }
.logo { width: 220px; }
.options { width: 294px; }
Live example(1): http://codepen.io/anon/pen/QwjBqQ
Also, on lower screen you may change the position of each block through mediaqueries,
Live example(2): http://codepen.io/anon/pen/ogjMpX
I remeber doing something to the fact of making a "container" div with display-block and then aligning the divs inside just like you would align text. But that was a while back.
You could have aloo at felxbox though http://css-tricks.com/snippets/css/a-guide-to-flexbox/ ... no script ... just css ... that does it similar.
So the final solution, that seems to me, to be more balanced is:
<div class="logo">...</div>
<div class="options">...</div>
<div class="search">...</div>
.logo {
float:left;
width: 220px;
}
.search {
float: left;
width: calc(100% - 220px - 294px);
/* fallback for browsers not support calc() */
width: auto\9; /* IE6, IE7, IE8, IE9 */
margin-left: 221px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .logo:width +1 */
margin-right: 295px\9; /* IE6, IE7, IE8, IE9 - please ensure this equals .options:width +1 */
}
.options {
float:right;
width:294px;
}
Notes on this solution: Browser hacks are not very elegant, although I tend to use them a lot for IE. If you are completely against it, I recommend you to try to emulate calc using the non-standard expression() syntax.
Thanks everyone!
Another solution could be like this one : jsfiddle
<div class="wrapper">
<div class="search">search</div>
<div class="logo">logo</div>
<div class="options">options</div>
</div>
.wrapper{
position:relative;
}
.wrapper .logo{
position:absolute;
width:220px;
top:00px;
left:00px;
}
.wrapper .options{
position:absolute;
top:00px;
right:00px;
width:294px;
}
.wrapper .search{
position:relative;
width:100%;
text-indent:240px;
}
I want to remove the selection-highlight on all images on my page.
I found some useful additions like :
CSS
img {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
pointer-events:none
}
But when I press down my mouse button and select multiple things or press Ctrl+A for "select all" my images get highlighted with a blue shade.
I tried to change it via :
CSS
img::selection {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}
But that don't have any effect.
Does someone have a useful solution or is there none yet ?
P.S. : I don't care about selecting my images - I just want to get rid of that blue shape.
Here goes a wacky solution I came up with...
1) After some testing I found that this only occurs on mozilla. Other browsers don't show the blue selection on images when the code
img::selection {
background: transparent;
}
is set.
2) Even mozilla - only has a problem with image elements. But other elements with a background-image obey the ::selection rule.
So technically we could work around this assuming we add an empty span in our markup after each img element which we set to display:none;
Then we can add some CSS which will only run in firefox which sets the images to display:none and places a background-image on the adjacent span.
Like this:
FIDDLE
**
img::selection {
background: transparent;
}
img + span {
display: none;
}
#-moz-document url-prefix() {
img {
display: none;
}
img + span {
background: url(http://placehold.it/200x200) no-repeat;
width: 200px;
height: 200px;
display: block;
}
}
<div>Hello there </div>
<img src="http://placehold.it/200x200" /><span></span>
<div>Hello there </div>
1: http://jsfiddle.net/GMuzV/30/
This disabled highlighting on a DOM element:
function disableSelection(target){
if (typeof target.onselectstart!="undefined") // if IE
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
target.style.MozUserSelect="none";
else // others
target.onmousedown=function(){return false;}
target.style.cursor = "default";
}
Use it like this:
disableSelection(document.getElementById("my_image"));
Trying to change a div background color when hover over another div. But I can't get it to worked. Been seing aroud her now, but can't find a similair question.
<style type="text/css">
#main {
width: 960px;
height: 600px;
margin: auto;
position: relative;
background: red;
}
#trykk {
width: 100px;
height: 100px;
background-color: yellow;
}
#trykk:hover #main {
background-color: green;
}
</style>
<div id="main">
<div id="trykk">
</div>
</div>
Thats the code I've been using. The only problem is that I'm not allowed to use javascript. So is there any way I can change background color on div #main when I hover over div #trykk?
A demo related to Rodik's answer, as he said you cannot change select parent using a child hence you cannot change the style of parent element, but if you want you can change your markup, as you said you cannot use javascript but if you can change the markup than it will go like this
Demo1
HTML
<div id="main">Main</div>
<div id="trykk">Trykk</div>
CSS
#main:hover + #trykk {
background-color: green;
}
Or if you want to nest your div's as you are doing right now, just change the selector like this
Demo2
HTML
<div id="main">Main
<div id="trykk">Trykk</div>
</div>
CSS
#main:hover > #trykk {
background-color: green;
}
CSS selection only works one way, from parent to child.
A child's state, hence, cannot affect it's parent's state.
A javascript mouseover event will be needed to implement this type of functionality.
with jquery you could do this:
$(function(){
$("#trykk").hover(function(){
$("#main").toggleClass("greenBackground");
});
});