I'm new with CSS, I'm trying to display an image with some text below when you hover over certain position on the page. The problem is, for some reason the image is not displaying, this is my code:
.foto-jb {
visibility: hidden;
}
.jb :hover .foto-jb {
visibility: visible;
opacity: 1;
}
<div class="member1">
<i class="name-person"></i>
<span class="jb">Name Person</span>
</div>
<div class="foto-jb">
<img src="./images/photo.png">
</div>
This line of code:
.jb :hover .foto-jb {
visibility: visible;
opacity: 1;
}
means, once .jb class is hovered look for .foto-jb class that is inside .jb class and make it visible.
So what you have to do actually is the following:
.member1:hover+.foto-jb
{
visibility: visible;
opacity: 1;
}
which means, once .member class is hovered look for .foto-jb class that is placed immediately after .member class and make it visible.
You may want to take a look at CSS Selectors it's really helpful.
Need to fix both HTML and CSS
.foto-jb {
visibility: hidden;
}
.jb:hover + .foto-jb {
visibility: visible;
}
<div class="member1">
<i class="name-person"></i>
<span class="jb">Name Person</span>
<div class="foto-jb">
<img src="https://dummyimage.com/300x150/000/fff">
</div>
</div>
Space is descendant selector and .jb :hover .foto-jb selects elements with .foto-jb class that are descendants of .jb class. Such elements don't exist in your case.
Move your <div class="foto-jb"> inside <div class="member1">, then use a combination of sibling (+) and descendant selector(space) to select the image, or only + to select the <div class="foto-jb">.
HTML:
<div class="member1">
<i class="name-person"></i>
<span class="jb">Name Person</span>
<div class="foto-jb">
<img src="./images/photo.png">
</div>
</div>
CSS:
.jb:hover + .foto-jb {
visibility: visible;
}
.jb:hover + .foto-jb selects the element that immediately follows the elements with .jb class (+ is the adjacent sibling selector).
Related
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS parent selector?
(33 answers)
Closed 6 days ago.
I have a div named "popup" which is used to show popup menu and has checkbox with label "more" which is used to get some more items for menu, it displays additional list.
Even if i change "#popup" or "overflow-y: scroll;" - nothing has changed, browser ignores this rule.
#popup {
... height: 13em;
overflow: hidden;
...
}
#popup_more {
visibility: hidden;
}
#popup_more_checkbox:checked~#popup_more {
visibility: visible;
}
#popup_more_checkbox:checked~#popup_more_checkbox_label {
visibility: hidden;
}
#popup_more_checkbox:checked~#popup {
overflow-y: scroll;
}
<div id="popup">
<ul id="popup_list">
...
</ul>
<input id="popup_more_checkbox" type="checkbox" style="display: none;" />
<label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
<div id="popup_more">
<ul id="popup_more_list">
...
</ul>
</div>
</div>
As j08691 commented, ~ is the general sibling selector and #popup isn't a sibling of #popup_more_checkbox. For what you're trying to achieve use the new :has() selector in CSS:
#popup {
... height: 13em;
overflow: hidden;
...
}
#popup_more {
visibility: hidden;
}
#popup_more_checkbox:checked~#popup_more {
visibility: visible;
}
#popup_more_checkbox:checked~#popup_more_checkbox_label {
visibility: hidden;
}
#popup:has(#popup_more_checkbox:checked) {
overflow-y: scroll;
}
<div id="popup">
<ul id="popup_list">
...
</ul>
<input id="popup_more_checkbox" type="checkbox" style="display: none;" />
<label id="popup_more_checkbox_label" for="popup_more_checkbox">More</label>
<div id="popup_more">
<ul id="popup_more_list">
...
</ul>
</div>
</div>
From MDN:
General sibling combinator
If you want to select siblings of an element even if they are not directly adjacent, then you can use the
general sibling combinator (~). To select all <img> elements that
come anywhere after <p> elements, we'd do this: p ~ img
And that's not the case in #popup_more_checkbox:checked ~ #popup.
i want to apply cursor: not-allowed to parent element and this should apply to the child elements as well.
What i am trying to do?
i have the parent div element with class "card" and cursor pointer and child elements with cursor pointer. now when the parent div element is with classes "card" and "disabled" now i want the parent div element and child elements to have the cursor:not-allowed.
Below is my html code,
<div class="card disabled">
<a href="some">
<div class="image">
<img/>
</div>
</a>
<a href="some">
<button class="icon">
<svg />
</button>
</a>
<div class="footer">
<div class="info">
<a href="somewhere">
<h4>text</h4>
</a>
</div>
<button>
<svg/>
</button>
<div class="more">
<div class="container">
<button></button>
</div>
</div>
</div>
</div>
Below is the css,
.card {
.icon {
cursor: pointer;
}
.image {
cursor: pointer;
}
.footer {
svg {
cursor: pointer;
}
}
}
Now i have applied some style like below to make the cursor: not-allowed when parent div has classes card and disabled
.card.disabled {
cursor: not-allowed;
}
This doesnt work. could someone help me with this. thanks.
Try this :
.card,
.card * {
cursor: pointer;
}
.card.disabled,
.card.disabled * {
cursor: not-allowed;
}
Thy this css code:
.card.disabled,
.card.disabled * {
cursor: not-allowed;
}
Also, you can't really change the cursor for links, so, I'd suggest to use this code also:
.card.disabled a {
pointer-events:none;
}
I have an img within an link within a list:
<li class="list-group-item">
<a class="video-thumbnail-link" href="javascript:void(0)" data-bind="click: (function(guid){ x.y.z.someFunction(guid); }).bind($data, $data.Guid)">
<img class ="video-thumbnail-icon" alt="picture" src="/Content/Images/picture.ico" />
</a>
<a class="anotherrandomcss" ...>
<img class="randomcss" ></img>
</a>
</li>
I want the first image to appear only on a .hover but I know img does not support CSS .hover so I apply it to the link. My css :
.video-thumbnail-icon{
height: 20px;
left: 100px;
position: absolute;
width: 20px;
}
.video-thumbnail-link {
visibility: hidden;
}
.video-thumbnail-link a:hover {
visibility: visible;
}
This hides my link and my img but on hover, it doesn't reappear.
Any idea how I could do this?
Btw, the only reason why I don't use background img is that in the same li, there is another img and this one is bound with knockout and it hides the other images's background. The first one needs to appear on top.
So what I did here; hide the a tag and since all img and a tag inside the li. so on :hover I just make it visible.
Check DEMO.
.video-thumbnail-link {
visibility: hidden;
}
.list-group-item:hover a {
visibility: visible;
}
I need to change #hidden to display:block when #aaa is hovered over. It's not working because #aaa isn't on the same level as #hidden - is there a way to manipulate a completely separate element on hover? I'm trying to make a CSS-based nav w/ a subnav and show the respective subnav when a nav item is hovered over.
HTML:
<div class="cheetahContainer">
<div id="cheetah">
<p>Cheetah</p>
</div>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
CSS:
#cheetah {
background-color: red;
text-align: center;
}
a {
color: blue;
}
#hidden {
display:none;
color: orange;
}
#cheetah:hover{
background-color:green;
}
#cheetah:hover + #hidden {
display:block;
}
http://jsfiddle.net/LgKkU/575/
Since your link is not a sibling of your #hidden div (thus you can't use the immediate adjacency selector), you should change last rule with
.cheetahContainer:hover + #hidden {
display:block;
}
Hovering over an element can only affect child elements in css. Here's a fix for your example:
<div class="cheetahContainer">
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</div>
However, I would recommend changing the css to something like this:
.cheetahContainer:hover .hidden {
display: block;
}
Changed out id's for classes and added hover to parent element so that hovering over the revealed text doesn't revert back to display:none;
It is not a direct sibling so you need to use js
Here is an example of what to do:
var $cheetah = document.getElementById('cheetah');
var $hidden = document.getElementById('hidden');
$cheetah.addEventListener('mouseover', function() {
$hidden.style.display = 'block';
});
$cheetah.addEventListener('mouseout', function() {
$hidden.style.display = 'none';
});
Or you can use the container:
.cheetarContainer:hover + #hidden {
display: block;
}
My code :
<div>
<div class='top-class'>
Header Name
</div>
<div class='body-class'>
This is body a
</div>
</div>
<div>
<div class='top-class'>
Another Header Name
</div>
<div class='body-class'>
Another body
</div>
</div>
css code I tried:
.top-class:hover + .body-class { display: block; } /* This is working */
But, I want that to happen when header is clicked. So, i tried this:
.top-class:visited + .body-class { display: block; } /* DIDNT work */
The pseudo class "active" seems to do the job
.top-class:active + .body-class { display: block; background-color: red; }
You can check my jsfiddle
You can use tabindex in you first div then it can have focus event on.
<div class='top-class' tabindex=1>Header Name</div>
Then in css you test focus pseudo class
.top-class:focus + .body-class { display: block; background-color: red; }
Check this jsfiddle