I am wondering if how could I show other element when the user hovers to a certain element.
For example,
<div class = "hoverMe">Hover Me </div>
<div class = "showMe">Hello I'm in show state.</div>
.showMe{
display: none;
}
.hoverMe:hover {
// then what to put here?
}
If the user hovers on .hoverMe the .showMe will be shown in pure css thankz.
I don't have 50 rep yet, so I can't comment on the above answer.
It is possible to do this purely in CSS using the tilde (~);
.hoverMe:hover ~ .showMe {
display: block;
}
MDN docs
You have to use the adjacent sibling selector +
.hoverMe:hover + div {
display:block;
}
From MDN
It will select only the element that is immediately preceded by the former element
Fiddle
Using jQuery, you will have to use the hover() function
$(".hoverMe").on("hover", function () {
$(".showMe").css("display", "block");
});
Related
i have the following Div:-
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">
and i am trying to hide it using this css, but the div is not been hide:-
[data-automation-id]="pageHeader"
{
display:none;
}
any advice?
Your selector syntax is a bit off. It should be element[attribute="value"] to style a element from it's custom attribute. Attribute Selectors - MDN
div[data-automation-id="pageHeader"] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
If the HTML element won't always be a <div>, you can also use this selector syntax [attr=value] which represents elements with an attribute name of attr whose value is exactly value.
[data-automation-id=pageHeader] {
display: none;
}
<div data-automation-id="pageHeader" class="bc_bi_ada2ac09 rn_bi_ada2ac09">Text</div>
My site is test06.menchasha.ru. I am trying to apply a hover effect. A div in the right should appear when the link, 'Promotional Activities' is hovered.
Example
I used the following code:
.child1 {
display: none;
}
a .title1:hover + .child1 {
display: inline-block;
}
But the hover effect is not working. What should I correct?
Thank you in advance!
I've checked the code in your link - you simply can't achieve the effect you need with your structure and only with CSS.
Here is your code:
a .title1:hover + .child1 {
display: inline-block;
}
If you want it to work the way you need your a element must have 2 children: .title1 and .child1, also .child1 must be direct sibling of .title1 cause + selector helps you to access only the nearest sibling of the element. But in your structure all the .child elements are not siblings of .title elements, they are in another div block. So just use JS to make them visible on hover.
I've this menu in which a tab with a css id selector hide or show a div on hover but i can't call it in css.
Here i insert an example to explain better my issue: on hover 7, 8 and 9 appears. How i have to change: #seven:hover ~ .box
http://jsfiddle.net/a3y52/654/
Thanks for helping out!
You can not achieve that in CSS. Instead, you can use div.menu element to trigger the hover, because this element is at the same level as the elements you want to affect:
.menu:hover ~ .box {
display: inline-block;
}
Check DEMO
ALTERNATIVE jQuery
$(document).on('mouseenter', '#seven', function() {
$('.box').css({'display':'inline-block'});
}).on('mouseout', '#seven', function() {
$('.box').removeAttr('style');
})
Is there a way to show a child if only parent has the same class? The tricky part of the question is parent and child does not know their class.
<div class="red">
<div class="red">red</div>
<div class="yellow">yellow</div>
<div class="blue">blue</div>
</div>
In this case I would like show only parent and its first child. But If I change parent class from red to yellow, I would like to show only parent and its second child.
Is it possible to create such a thing?
Only if the classes are known before hand...
div div { display: none; }
div.yellow .yellow,
div.blue .blue,
div.red .red { display: block; }
You won't be able to do this in CSS alone, assuming that the class names are unknown to the CSS. However, if they are from a defined set of classes, you could accomplish this by doing something like so (this example using CSS3 :not selector):
div.red > :not(.red),
div.yellow > :not(.yellow),
div.blue > :not(.blue)
{
display: none;
}
If you wanted to venture into JavaScript, you might be able to accomplish the task by doing something like (JSFiddle):
var myDiv = document.getElementById('myDiv');
for( var i=0, j=myDiv.children.length; i<j; ++i)
{
if(myDiv.children[i].className != myDiv.className)
{
myDiv.children[i].style.display = 'none';
}
}
This assumes that the div has an id of myDiv, and the the element classes don't include anything else.
Yes but you will need a handful of extra css class definitions. Try something like this:
div.red{
display:block;
}
div.red div.red{
display: block;
}
div.red div.yellow{
display: none;
}
div.red div.blue{
display: none;
}
etc... If you do not want to explicitly write it out like that the only way would be javascript. JSFIDDLE
I'm familiar with the :hover psuedo class and using it for elements as well as the typical link setup we're all used to. What I am trying to do however is create a situation where hover over one element would change properties of another. For instance if I were to hover over .block1, #block2 would become visible. I would think the .css would look like something this...
.block1:hover div#block2
{
visibility:visible;
}
but that's getting me nowhere. Thoughts? I know that I could probably use javascript to make this happen (make elements appear and disappear) but I would love to find a pure css solution to this.
The element you want to change has to be a child element of the one you are hovering over.
Example CSS:
#navButton div.text {
display:none;
}
#navButton:hover div.text {
display:block;
}
This will make the text div display if you hover over the element with id="navButton".
Otherwise, use a JQuery solution:
CSS:
#navButton div.text {
display:none;
}
.hover {
display:block;
}
Javascript:
$("#navButton").hover(
function () {
$("#navButton div.text").addClass("hover");
},
function () {
$("#navButton div.text").removeClass("hover");
}
);
Edit:
You can also do this for sibling elements in CSS if the hovered element precedes the element you want to modify. Like so:
#navButton + div.text {
display:none;
}
#navButton:hover + div.text {
display:block;
}
OR
#navButton ~ div.text {
display:none;
}
#navButton:hover ~ div.text {
display:block;
}
If that second element is a descendent of the first, then it will work.
jsFiddle.