I want to display my contact form when the user hovers over my navigation menu "contact" list item using css.
So I want to have a solution that explains how I can use css to hover over "A" (menu item) to display the content corresponding to "A" (content) or if you hover over B it displays B and so on.
Here is great tutorial that i used for my website:
http://codeissue.com/articles/a04e0d17a60fad8/simple-html-drop-down-hover-menu-using-just-css-no-javascript
You can try the following simple solution based on pure CSS (no javascripting, so it will work even if javascript is disabled on client's computer):
HTML
<body>
<div class="itemHeader">A</div>
</body>
CSS3
div.itemHeader {cursor:pointer;}
div.itemHeader:after {
content: "Blah-Blah-Blah";
color: #909090;
display:block;
opacity:0;
}
div.itemHeader:hover:after{opacity:1;}
link to jsfiddle: http://jsfiddle.net/fLMSd/
Related
I have a component that, upon a hover, shows a button and a link that you can click on. This is not a menu... just a box in the middle of the page.
For accessibility, I would like a user to be able to tab into the container (happens now, and displays the content in the .HiddenUntilHover class) AND also continue to tab to the button and link that show up on the hover/focused state.
Right now you can focus on the container and see the hover state; however, when you tab it just goes to the next element and does not allow you to tab to the button or link WITHIN the hover state.
Pseudo code example:
/* My component .jsx */
<div tabIndex="0" className="MainContainer">
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
/* I would like to be able to tab to these clickable things! */
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
And my SCSS:
.HiddenUntilHover {
display: none;
}
MainContainer:focus,
MainContainer:hover,
> .HiddenUntilHover {
display: block
}
I ran into this issue a few days ago and I solved it using css classes to make the hovered content accessible via keyboard navigation.
The way I got this working was to use css pseudo-classes to ensure that when the div element is active & focused that the buttons inside also display. Specifically the additional use of :focus-within & :focus-visible should ensure that when you tab over the list items, their contents are also displayed and keyboard accessible.
.MainContainer {
&:not(:hover, :focus, :active, :focus-visible, :focus-within) {
.HiddenUntilHover {
visibility: hidden;
}
}
}
<body>
<div tabIndex="0" className="MainContainer">
Content
<div className="SomeOtherClass">
<div className="HiddenUntilHover">
<button>Click me!</button>
I am also clickable
</div>
</div>
</div>
</body>
Here's a link to the Codesandbox demo of this working
When the box is in focus, tabbing further to the button will make the box blur, which will hide it, and its contents, so focus will move to the next accessible element. I think this is the behavior you are experiencing.
You might consider using inserting an aria-activedescendant or tabindex attribute when the box comes into focus. This requires a little javascript.
Strictly speaking, you don't need to rely on the hover state to make that control accessible. You could have an offscreen (or clipped) button/link that is not a DOM child of the hidden (display:none) box. If you take this approach, read up on the aria-owns attribute.
As long as it is marked up as a button or link (or has a tabindex="0" setting), and is not 'really' hidden, it ought to be possible to tab to it.
Try increasing the properties of the class MainContainer
for example.
.MainContainer {
width: 100%;
height: 100px;
}
.MainContainer .HiddenUntilHover {
display: none;
}
.MainContainer:hover .HiddenUntilHover, .MainContainer:focus .HiddenUntilHover {
display: block;
}
Elements appearing on hover are inherently inaccessible. You are experiencing one side of the problem with your code, where it is difficult to make it keyboard accessible.
But think about touch screens that have no real concept of hover: is there some way to reach your button on a smarphone or tablet?
For a more pragmatic answer, if you need to stay with hover, a less hacky solution than the two already posted ones could be the following:
use focusin and focusout events. See for example this question for explanations and differences with focus/blur, and this w3school doc for browser compatibility.
You will have to structure your HTML differently, such as:
<div id="outer">
<div id="hover">
...
</div><!--hover-->
<button>Your button which only appears on hover</utton>
</div><!--outer-->
As well as use a bit of js:
$('#outer').on('focusin', __=>$('#hover').classNames.add('keep-visible'));
$('#outer').on('focusout', __=>$('#hover').classNames.remove('keep-visible'));
With a corresponding .keep-visible class which will leave the element display:block (I'm not a CSS expert, I let you write the code).
The overal functionning is the following: when some element within #outer takes the focus, the focusin element is fired due to bubbling. In the event, you put your class .keep-visible which makes the element to stay visible.
The focusout event is fired when the focus leaves the last element within #outer. At that point you remove the .keep-visible class, which makes the element to disappear.
According to the link above, onfocusin/out aren't standard, but are supported by all major browsers including IE. Firefox is the last one to implement it in 52.0, so it's a kind of defacto standard; we can reasonably expect that it won't disappear soon.
On this link, instead of hovering the mouse over the image, I wanted to make the other images appear only when I click in the main image. I tried replacing the pseudo class for target, focus, but none of them worked. Is there a way to do this with css only? Because my CMS doesn't allow me to insert javascript.
Thanks,
Bruno
Stuff you can do with the “Checkbox Hack”
It is possible to do in combination with HTML, not just css. You will have to take use of the checked css event in combination with <label> element, you will also have to have some checkbox hidden somewhere in the document. It is quite hacky and its all described in the article.
It is possible to do this. There is one problem where links do not register :focus events, it will register them if you navigate to the link with TAB. But that would be a problem for the users. Anyway you can use that to overcome the problem. Just place tabindex on your link
<a href="#" tabindex="0">
<img src="1.png">
</a>
On your CSS:
a:focus img{
content:"xxx";
width:XXpx;
height:XXpx;
/*Whatever you need here*/
}
I am attempting to create a tooltip system using CSS and a very small amount of JavaScript. So far I have created a structure that goes as follows:
<div class="tooltip" title="foo"></div>
<div class="tooltip" title="bar"></div>
<span id="tooltip-span"></span>
I have created several CSS styles so that the tooltip span is shown on hover and a little bit of JavaScript moves the tooltip to the correct location depending on the mouse position.
However, I have had trouble attempting to make the tooltip's content correspond to the div being hovered over. I have tried using the following CSS, but to no avail:
.tooltip:hover ~ #tooltip-span {
display: inline;
content: attr(title);
}
Is there any way to make the span element have the content of the title of the div being hovered over using CSS?
Thanks for reading!
With pure CSS, no. content: attr(title) sets the content to the title attribute of the matched element, which in your case is #tooltip-span.
To have that work in the way you want, you'd need to update the title attribute of <span id="tooltip-span"></span> using Javascript.
I'm trying to make my little icons on this page (http://www.alinewbury.com/contact.html) into links.
They're each in a div separately, but whenever I try to do:
<div class="social-btn pinterest"></div>
It doesn't seem to work! How can I link these icons to the respective websites?
The Div is supposed to be inside the Anchor tag.
Check Anchor tag usage
To make the icon click able you have to fix some issues. First of all your icons are not really linked. you can see the Hand cursor because the property defined in the class .social-btn
To make a icon clickable you should follow this approach. put the text inside a tag a better approach also you have to change the font-size:0
.social-btn a
{
padding: 22px;
font-size: 0;
}
your HTML should be like this.
<div class="social-btn pinterest">
pinterest
</div>
I have a list element with div content inside and an a tag wrapping the div content. Example code:
<li>
<a href="http://google.com/">
<div id="tease-info">
<div class="inset-img-border fade"></div>
<img src="/img/img.jpg">
<div id="arrow-right-small"></div>
<h4 class="title">E-mail Marketing</h4>
<p class="title">Messaging That Pays</p>
</div>
</a>
</li>
In my style sheet, I have a hover being applied to 'tease-info' for interior content. Like so:
#tease-info:hover h4{
color: rgb(191,69,164);
}
The problem comes only in ios. On my ipad, when I tap the li element, I get that grey overlay native to ios, letting you know the element your selecting. I also get the hover state. However, when I release, I am not taken to the href and the hover state remains enabled.
It seems like the hover state is over-ruling the a tag? What is happening?
ok i have a fix now. To start with im using Modernizr, and i read a technique which suggested using the .touch and .no-touch class's to fix the issue. this works pretty easily if your :hover event is expressed in CSS
.ugcpost:hover .meta {display:block;}
.touch .ugcpost:hover .meta {display:none;}
this solves the problem, just make sure you have the touch event in your Modernizr config. another more fleshed out option if you using JS to show and hide your hover, is to force page to follow the href with a single click. there is one issue to note though that you want to ensure your distinguishing between a true click and not a screen scroll. so please see the following JS, again using Modernizr, alough you code just check the client's User agent.
followPost : function(item) {
$(item).on('touchend', function(e){
location.href = $(item).attr('href');
$(item).off('touchend');
});
$(item).on('touchmove', function(e){
$(item).off('touchend');
});
},
initTouchEnhancements : function() {
$('.collection a, .post a, .ugcpost a').live('touchstart', function() {
var item = this
followPost(item);
});
}
NOTE: this also relies on the use of 'on' and 'off' functions in JQ 1.7. thanks to this post for identifying this.
Stop the touchstart performing too quick when scrolling