Hey I have a little problem and i can't solve it.
Here is the CSS:
.error {
float: left;
color: #F00;
visibility: hidden;
display: inline;
}
.validieren:required:invalid + .error {
visibility: visible;
}
.right {
float: left;
color: #0F0;
visibility: hidden;
display: inline;
}
.validieren:required:valid + .right {
visibility: visible;
}
And here is the HTML Code:
<img src="haken.gif" class="right"> <img src="kreuz.gif" class="error">
The problem is that the second (in this case error) image doesn't appear.
Thanks for your help.
Sorry for my language i'm german.
Try this:
.validieren:required:invalid ~ .error {
visibility: visible;
}
You have both .validieren + .error and .validieren + .right.
.validieren can't be immediately followed (adjacent sibling selector) by both .error and .right.
Changing to the general sibling selector should make it work. I'm assuming that the .validieren element comes before (and shares the same parent as) both the images.
The problem is, your error class contains an attribute (specifically visibility: hidden) that forces your image (or element) to not display.
You have visibility: hidden set for the error class, which is assigned to the second image. What behavior are you expecting?
Related
HTML (example):
<img src="" id="img-test" />
So I want to hide only anchor not img:
#media print
{
#href-test-anchor
{
display: none !important;
}
}
This code hide and img tag, is there away to do it?
Use visibility instead:
a {
border:5px solid red; /* You will not see this */
visibility:hidden;
}
img {
visibility:visible;
}
<img src="https://picsum.photos/id/10/200/200" id="img-test" />
(EDIT: because it got deleted)
Use visibility instead.
#href-test-anchor
{
visibility: hidden;
}
#href-test-anchor img
{
visibility: visible;
}
Doesn't really make sense as to why you are using an anchor, as you are not hyperlinking any text. You could use a div as an alternative; but this does work with an anchor.
I have a container element that somewhere in its tree contains another element, whose visibility should be toggled when hovering over the container element. This works fine
.container .toggle {
visibility: hidden;
}
.container:hover .toggle {
visibility: visible;
}
Problem is, when I nest two containers with separate .toggle elements both elements are visible when hovering over the parent container.
The easiest fix is to change add a > into the :hover css selector. That works fine as long as the .toggle element is a direct child of the .container element.
In my use case I cannot guarantee that this is the case, the number of elements between the .container and .toggle element must be variable.
My best guess was a CSS the selector .container:hover *:not(.container) .toggle
trying to select every child of a container, that is not a child of another container... sadly that is not working
Here's the fiddle: http://www.w3schools.com/code/tryit.asp?filename=F0N00I8GETY0
Any hints welcome, thank you in advance :-)
If you are willing to stipulate the maximum nesting level, you can do this as follows.
div { outline: red 1px solid; }
/* Hide toggle elts by default. */
.toggle { visibility: hidden; }
/* Show toggle elts whose container is hovered. */
.container:hover .toggle { visibility: visible; }
/* Unless there is a non-hovered container in between! */
.container:hover .container:not(:hover) .toggle { visibility: hidden; }
<div class="container">
OUTSIDE CONTAINER
<div class="toggle">OUTSIDE TOGGLE</div>
<div class="container">
INSIDE CONTAINER
<div class="toggle">INSIDE TOGGLE</div>
</div>
To support three levels of nesting, you'd need a rule such as
.container:hover .container:hover .container:not(:hover) .toggle { visibility: hidden; }
the easiest thing I can think of is to toggle the visibility of the inner .toggle elements to hidden when toggling the parent .toggle element.
.container .toggle {
visibility: hidden;
}
.container:hover .toggle {
visibility: visible;
}
.container:hover .toggle .toggle {
visibility: hidden;
}
but then again this code wont allow you to toggle the nested .toggle elements' visibility, so you must add to the code above:
.toggle:hover .toggle {
visibility: visible;
}
but this only works as intended when you only have two nested .toggle elements. And I'm afraid to say if you wanna toggle more nested elements you need to use js.
If container is always in div, something like this could work
.container:hover div:not(.container) .toggle, .container .container:hover .toggle, .container:hover > .toggle {
visibility: visible;
}
Here is my problem: I want to make a thing, where when you hover over one object, it disappears, but another object appears. I tried this for my code:
h1.title:hover + .ps{
visibility: visible;
}
h1.title:hover !important{
visibility: hidden !important;
}
.ps{
visibility: hidden;
}
i guess you want smth like this :
jsfiddle
IMPORTANT : h1.title:hover !important{ this is not correct , the !important must be inside the {} and after the css properties for example opacity:1!important
code added
PS i used opacity instead of visibility...but you can change it if you want
html :
<div class="container">
<h1>TITLE</h1>
<p>Other text</p>
</div>
css :
.container {
position:relative;
}
h1 {
font-size:40px;
color:red;
line-height:48px;
margin:0;
transition:0.3s;
}
.container p {
position:absolute;
top:0;
font-size:35px;
line-height:40px;
color:blue;
margin:0;
transition:0.3s;
opacity:0;
z-index:-1;
}
.container h1:hover {
opacity:0;
}
.container h1:hover + p {
opacity:1;
}
to see differences between opacity and visibility read here
the fact is that if you use opacity the object disappears ( fades out ) but it's still there ( occupies space ) and if you have another object in the same place you can access it.
but in the case of visibility , it does the same exact thing as opacity but you can't access the element behind it.
in your case, the h1 title is the one triggering the hover effect and so...even though you hide it, you still need to be able to ' touch ' it, that's why you need opacity. and that's why if you use visibility the effect will not be so nice
BUT
if you want to use visibility , remove the transition , because visibility has a binary setting (visible/hidden) not a **calculable ** property (1,0) , and so transition doesn't work with visibility
and then use this code :
.container p {
visibility:hidden;
}
.container:hover h1 {
visibility:hidden;
}
.container:hover h1+p {
visibility:visible;
}
Here is the logic to achieve what you want.
div {
display: none;
}
a:hover + div {
display: block;
}
a:hover {
display: none;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
You have to use javacript (it's best to use jquery – it just makes things simpler).
$("p.show").hide();
function hide() {
$("p.show").show();
$("p.hide").hide();
}
p.show {
visibility: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p class='hide' onmouseover='hide()'>Hover on me</p>
<p class='show'>Done!</p>
i have an inline blocked div inside anchor
HTML:
<ul>
<li>
<a href="">simple
<div class='bar'>
</div>
</a>
</li>
</ul>
CSS:
.bar {
width: 25px;
height: 25px;
background-color: red;
display: inline-block;
}
.bar:hover {
background-color: blue;
}
I need to get hover effect on div while i hover the anchor, not only div.
Also, my case is a little bit more complicated, so i cant use something like
a:hover .bar {
background-color: blue;
}
Here is jsfiddle with code http://jsfiddle.net/zeL102wr/2/
Check this http://jsfiddle.net/zeL102wr/4/
Add a class to your <a> tag and use :hover on that
Example
HTML
<a class="hoveranchor" href="">simple
<div class='bar'>
</div>
</a>
CSS
.hoveranchor:hover > .bar {
background-color: blue;
}
This would apply the style to all elements with class="bar" which are direct descendent of elements with class="hoveranchor"
looks like it can't be done in some universal way. only by something like wrapping li to some class and using css
.baz a:hover .foo .hover {
opacity: 1;
}
.baz a:hover .foo .main {
opacity: 0;
}
Updated the fiddle http://jsfiddle.net/zeL102wr/17/
Since i use LESS, i made a function
.enable-foo-hover() {
&:hover {
.foo {
.main {
opacity: 0;
}
.hover {
opacity: 1;
}
}
}
}
and use it for the element from which i need to hover my construction. Thanks for your answers
Updated Css
ul li a:hover ,.bar:hover {
background-color: blue;
}
Demo
If you are fine with using jquery the following will work for you 'advanced' list items...
JQUERY
$(document).ready(function () {
$('.hoveranchor').mouseover(function (e) {
console.log($(this).children('.main'));
$(this).find('.main').addClass('hover');
$(this).find('.main').removeClass('main');
});
$('.hoveranchor').mouseout(function (e) {
console.log($(this).children('.main'));
$(this).find('.hover').addClass('main');
$(this).find('.hover').removeClass('hover');
});
});
Additionally you will need to:
add class='hoveranchor' to your anchor tags
Remove
Remove css for :hover
Change opacity of .hover to 1
Check it in action here: http://jsfiddle.net/zeL102wr/5/
I'm trying to make a pure CSS image change on hover / rollover without using background images. So far I have one image and when you rollover that image, another image appears. Here is the CSS:
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
So, when you rollover the #visible div, the #hidden div appears. Here is the jsFiddle: http://jsfiddle.net/MNyzd/1/
This works great, but it is not exactly what I want to accomplish. I would like the images to swap. So when you rollover #visible, it should disappear instead of remaining visible. My first initial idea was to make the #visible div to display:none on hover (#visible:hover display:none;), but this did not work.
So does anyone have any idea how I would successfully turn this into a traditional image hover / swap using this method? Any help would be appreciated and again, here is the jsFiddle... http://jsfiddle.net/MNyzd/1/
Use a container where you do the hover on:
http://jsfiddle.net/MNyzd/8/
.hidden {
display: none;
}
.container:hover .visible
{
display: none;
}
.container:hover .hidden {
display: block;
}
See also this answer: Hide / show content via CSS:hover (or JS if need be)
Like this?
jsFiddle
div {
cursor:pointer;
overflow:hidden;
width:300px;
}
div > img:nth-child(2), div:hover > img:nth-child(1) {
display:none;
}
div:hover > img:nth-child(2) {
display:block;
}
http://jsfiddle.net/MNyzd/4/
EDIT: The code:
#hidden {
display: none;
position: absolute;
top: 8px;
left: 8px;
}
#visible:hover + #hidden {
display: block;
}
#hidden, #visible {
width:300px;
height:300px;
}
<div id="visible"><img src="http://b.vimeocdn.com/ps/372/159/3721596_300.jpg"></div>
<div id="hidden"><img src="http://yuccan.com/wp-content/uploads/2013/04/cool-eez-spaced2.png"></div>