I would like to show text when the mouse hovers over a button or <a> tag.
For example, I have this button with some text:
I have managed to make it larger when the mouse hovers over the button:
What I would like to do instead is keep the text and image on top and display some text beneath the button. Can anyone suggest how I might do this?
Not sure if thats what you are looking for since you didn't include your code...
div {
display: none;
margin-left: 10px;
}
a:hover+div {
display: block;
}
<a><img src='http://vignette1.wikia.nocookie.net/planetside2/images/4/4d/Scythe_Side_View_Icon.png/revision/latest?cb=20130426065845'></a>
<div>Display Whatever</div>
Add hover state to parent element and styles to child
.parent .child {display: none}
.parent:hover .child {display: block}
Remember to put text you want to show in front of picture (posistion: absolute or/and z-index manipulation)
Related
I would like to hover a link (<a> tag which contains a <div> tag), so the color becomes red BUT only when I hover the yellow field! My problem is that you can also hover it if the cursor is not on the yellow field.
I know that I could put the a tag into the div tag but I want to link the whole box and not only the text.
I also tried to use a { width: 100px; } but that is of course not working.
https://jsfiddle.net/3phy4950/
Any ideas how I can resolve this?
It does not work with width, because you are applying this style to the a tag. But a tags are display inline by default which means they dont take the whole space / line.
The div tag is display block by default, which means it will take the whole space / line.
What you need is to change the display style from the a div to inline:
a div {
display: inline;
}
See Fiddle
Use inline-block as the display format for the <a> tag.
a {
width: 100px;
display: inline-block;
}
Your updated fiddle
What about this:
<div class="btn" onclick="location.href='http://google.com'">ยป Hover Me</div>
And the css:
.btn {
background-color: yellow;
width: 100px;
}
.btn:hover {
color: red;
}
Is there a way to do this without javascript and just using CSS?
I have a navigation. The text within the anchor elements are black. Upon hover of the line item the line item becomes orange. At that point I would like to alter the child anchor element text to be white.
What I have right now is an anchor tag rule to be white when hovered. Because the anchor is smaller than the line item it means that, hovering over the line item doesn't change the text to white straight away, only when the mouse hovers over the center, where the anchor tag is.
I could post html but I don't think its necessary. Is it? Hope I'm making sense and that my question is clear.
Put another way, I'd like to alter an element based upon the hover state of it's parent element.
It is not possible to target the parent element using CSS selector. You can instead add a :hover rule to line item to change its background color. At the same time, add an additional rule that changes the color of the child link upon hover:
li:hover {
background: orange;
}
li:hover a {
color: white;
}
Demo
You can try this. Giving a tag display:block; will take the full width of your li element.
#menu li a:hover {
background: #FC6;/*added*/
}
#menu a {
color: #000;
dispaly:block;/*added*/
}
DEMO
I'm trying to add two hover animations to each image in my photo galleries. Basically, when you hover over an image, I'd like for there to be a text that shows up in a black overlay and when you hover over that text, it becomes underlined. Essentially, I'd like it to look something like this: http://i.stack.imgur.com/vAWpd.jpg
I know I have to create a hover element but the fact that I have two create two animations within each other really confuses me. Could anyone give me a few words of guidance?
Thanks!
Rowan
You mean like this?
HTML:
<div id = 'pie' src = 'http://www.pieisgood.org/images/slice.jpg'><p id="pText" style='left:50px; top:50px; position:absolute;'>Text</p></div>
CSS:
#pie
{
width:500px;
height:265px;
background-image:url('http://www.pieisgood.org/images/slice.jpg');
}
#pText
{
display:none;
transform:rotate(60deg);
border:1px solid;
}
#pText:hover
{
text-decoration:underline;
}
#pie:hover > #pText
{
display:block;
}
The text is hidden until you hover over the div with an ID of pie. The > means it will effect the element after it if it is a child of pie. It changes display:none on the paragraph to display:block while you're hovering over the image. #pText:hover means when you hover over the paragraph, text-decoration:underline will underline the text while you're hovering over the paragraph.
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I have html and css as below -
.title {
display: block; background-color: red;
}
<a href="#">
<span class="title">Text</span>
</a>
I could see that the SPAN spans to the 100% of the available width (because of display: block). Like below
|----------------------------------------------------|
| Text |
|----------------------------------------------------|
In Firefox, I can click anywhere in the above box, and it takes me to the linked page. However, In IE (IE 7) I get the cursor as hand only when I hover over "Text" text only.
What hack I'll have to do to make it work (same as it does in FF) in IE as well?
I tried placing the anchor tag itself (not just the text) in span but it won't work.
Thanks.
Style the anchor and remove the span.
(The problem is due to how some browsers handle elements that are display: block inside elements that are display: inline. You can work around it by styling both the anchor and the span, but the span appears redundant in this example)
for your <a> tag, make the style "display: block; width:100%;"
Definitely, you need to remove the span and apply that class to the anchor tag. I don't think you need to set the width to 100% explicitly, but I could be wrong.
Remove the extra span and place that title class on the link itself. Then add width:100%; to the css.
Less markup is most often better, thats why you should remove the extra span.
you can also using margin or padding
Give a style to anchor of display:block and max-width:30px !important; max-width size can be any
li a {
display: block;
height: 30px;
max-width: 30px !important;
}