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;
}
Related
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)
I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<div class="grey_bg">
<h1>Hey</h1>
</div>
... or make span block-level too:
span {display: block;}
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<span class="grey_bg">
<h1>Hey</h1>
</span>
First your markup is not correct. You can't have a block element, h3, inside an inline element, span.
But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:
.grey_bg {
width: 100%;
background-color: #C0C0C0;
display:block;
}
Your code is incorrect because your span is wrapping your H tag.
You should not use span to wrap inline element's like H tag's. Instead you want the span to be inside your H tag.
The span element is the inline level generic container. It also helps to inform the structure of document, but it is used to group or wrap other inline elements and/or text, rather than block level elements.
The line between the two different types might seem fairly arbitrary at first. The difference to bear in mind is the type of content, and how it would appear when written down without any styling. A div is placed around a group of block level elements—for example, to wrap a heading plus a list of links to make a navigation menu. A span wraps a group of inline elements or (most usually) plain text. The key word is “group”: if a div wraps just one block-level element, or a span just one inline element, it's being used unnecessarily. For example, check out the way the div and span elements are used in the following simple markup:
W3C
.grey_bg {
width: 100%;
background-color: #C0C0C0;
}
<h1><span class="grey_bg">Hey</span></h1>
I figured out that I had to target the h1 as well in the css:
.grey_bg h1 {
background: #C0C0C0;
}
I have a span tag that has a background image on it then inside it I have an a tag with text link. The span has the background image set to the right of the text link. I want when you rollover the a tag for it to also cover the span background image in its hover state also.
I tried something like this but still not working.
span a:first-child + span a:hover{
cursor: pointer;
}
Markup html
<div class="wrapper">
<span>Study Bill</span>
<span>Download PDF</span>
</div>
Do it the other way; wrap your span with one big <a> tag, and write the link text inside the <span>. For instance:
<a href = "#">
<span style = "background-image: url(your_image.png);">
Download PDF
</span>
</a>
You can't change properties of parents in CSS upon interaction with children - it works one way only. However you can do something like this - http://jsfiddle.net/uH2XP/
some link text
<style>
a:after {
content: '';
display: inline-block;
height: 20px;
width: 20px;
background: green;
}
a:hover:after {
background: orange;
}
</style>
Just replace content: '' with content: url(path/to/your/image.png)
I would probably try to assign the background to the link and the span. Then you can have the hover state handle the background transition.
<style>
div.wrapper a, div.wrapper span{background:#f00;}
div.wrapper a:hover{background:#0f0;}
</style>
<div class="wrapper">
<span>Study Bill</span>
Download PDF
</div>
http://jsfiddle.net/sdowswell/sz6fq/
The implementation is here: http://jsfiddle.net/chp8y/1/
If you hover over the first box, #1, you will see the 'Add Client' change color but the #1 won't. How do I achieve that without using JS ?
If you do a .sit-in-the-corner:hover it will only work when you hover over the 1. But that's not what I want.
Thoughts?
Isn't it a case of changing the last rule to:
table td:hover, table td:hover span {
color: #aa5650;
}
THe style for the class has higher precedence than the style for the tag, so it will override it.
You can add a style that removes the specific setting for the span when the cell is hovered:
table td:hover .sit-in-the-corner {
color: inherit;
}
http://jsfiddle.net/chp8y/5/
Wrap the #s with anchor tags. Drop the color attribute from the .sit-in-the-corner and add that attribute to the anchors. Like this:
HTML:
<span class="sit-in-the-corner"><a class="tile-number">1</a></span>
CSS:
.sit-in-the-corner {
float: left;
margin-left: 5px;
margin-top: -85px;
}
.tile-number {
color: #556655;
}
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;
}