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');
})
Related
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 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");
});
If I have 2 elements side-by-side in the DOM like this:
a.button
div.container
I want to target a.button if div.container has class div.container.fullscreen
I was thinking something like this:
div.container.fullscreen + a.button { display:none }, but it does not work.
Any suggestions?
+ won't work as it's the next sibling selector.
Your selector div.container.fullscreen + a.button would target the a if that was the next immediate sibling of the div, e.g.
div.container.fullscreen
a.button // this is now targeted
div.container.fullscreen ~ a.button won't work either as that'll select all the siblings after, and not before.
a.button // this isn't targeted.
div.container.fullscreen
a.button // this is now targeted
a.button // so is this
Sadly, there is no previous sibling selector to achieve what you want using pure CSS.
The E + F syntax only matches if E precedes F. If they are ordered like you just described, I don't think you can style the a with pure CSS.
You might simply change the HTML to put the fullscreen class on the parent container of both container and button. That way, you can use the following declarations to style:
.fullscreen > div.container {
/*
any fullscreen modifications to be done, what used to be in div.fullscreen
*/
}
.fullscreen > a.button {
display: none
}
missing your real html. <a> has an href attribute ? Is it targetting <div> ?
Button doesn't have necessary to be hidden if it stands hidden under div once full expanded , it 's being hidden by div itself.
Form elements can help see idea in action :
http://codepen.io/gcyrillus/pen/otFim
I have found an irritating bug in IE 8-10 that prevents a parent's active state being triggered. It appears that if a child of the parent element is the target of the click event the active state on the parent element is not triggered.
Here is a working example. If you click the text inside the <li> the element wont change colour. If you click inside an <li> anywhere other than on the <p> child the element will turn blue.
This is a problem as it pretty much renders the css :active pseudo state useless in IE if the element has any children.
Has anyone encountered this problem before, and even better found a way round it?
Here's an easy workaround: add a css rule to the paragraph.
Working example
CSS
ul { list-style: none; }
li { height: 50px; margin-bottom: 4px; background: red; }
li:active { background: blue; }
p:active { background: blue; height: 100%;}
I have fixed the issue by preventing pointer-events on the child element. This way the :active state is triggered directly on the parent and doesn't need to be propagated. The only downside of this solution is you cannot attach an event listener (not even a css `:hover selector) to the child anymore. So you have to move all your event listeners to the parent.
.child { pointer-events: none; }
Here is jsFiddle https://jsbin.com/govelabuca/1/edit?css,output
Just uncomment the last line in css and compare the result in IE and other modern browser
You could add another CSS selector for the <p> tag so your
li:active { background: blue; }
will become
li:active, li p:active { background: blue; }
I would suggest you would use javascript or jquery for that when you click a child element, perform the active state of of the parent.
I've stumbled upon this on IE11. I was writing a drag-n-drop styling logic using this approach suggested by Martin.
In my case I have a row with td cell elements and using :active for the parent tr does the job for other browsers. For IE, I've added a CSS rule to target the cells (tr.myRowClass > td:active) and modified the if condition in my custom JS logic executed during the mousemove event handler of the cells:
if (style.getPropertyValue('cursor') == 'auto' || document.querySelectorAll(":active").length > 0) {
The remaining task is to find the target element:
Determine which element the mouse pointer is on top of in Javascript
I'm trying to transition a child element when the parent element is focused.
I want to do something like:
parent:focus{
//do something to first-child
}
Is this possible, or does this require JS?
I'm not sure if this is what you mean, or not. If you do...
.parent:active .child {
/* Style */
}
The style will be applied to .child elements inside the focused .parent.
Here's a fiddle that shows how it works. You can click anywhere in the big div to change the smaller (child) divs.
You should use
parent:focus CHILD {
//do what you want on the child
}
Example:
ul li:focus a {
color:#000;
}
Even if I'm not sure it will work with :focus that is usually used on inputs. It would be better to use it with :hover (for example).