This question already has answers here:
Difference between CSS + selector and ~ selector [duplicate]
(3 answers)
Closed 6 years ago.
I was creating a simple effect for a webpage. I wanted to show an image when mouse is hovered on a link. The problem is, when I use <br> tag, image is not shown on hover, but when I remove <br> it works.
Can anyone tell me what is the issue here? Why does the <br> obstruct the hover? Here's a snippet showing that <br> is not working:
.imageClass{
display: none;
}
a:hover + .imageClass{
display: block;
}
Esmartify
<br>
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
<img src="images6/concert.jpg" width="100%">
</div>
Here's a snippet showing it is working without <br>:
.imageClass {
display: none;
}
a:hover + .imageClass {
display: block;
}
Esmartify
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
<img src="images6/concert.jpg" width="100%">
</div>
My guess is that br behaves as an element between the link and the div. If so, a:hover ~ .imageClass should work.
a:hover + .imageClass - imageClass must be immediately after link, remove br and add to css display:block for link
or try to use: a:hover ~ .imageClass
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 1 year ago.
I want to create a button like README.md (GitHub), when hover on # headline it will show a button link to the that id, image.
I tried with html:
<div id="headline"># HEADLINE</div>
css:
a.to {
display: none;
}
#headline:hover + a.to {
display: block;
}
but it's not work
This is how it's done. You were close, but the + combinator only works with adjacent elements. Since the a tag is a descendant of the div, there would be no need for a combinator.
.to{
visibility: hidden;
}
#headline:hover .to{
visibility: visible;
}
<div id="headline"># HEADLINE</div>
One more thing, to scroll within the DOM, the href attribute would have a # followed by the id of the target element. So to scroll to the div of id "headline", the href attribute's value would be #headline.
This question already has answers here:
How to remove underline from a link in HTML?
(8 answers)
Closed 6 years ago.
I was wondering how you would disable to underline on the "a" attribute, for href's. I find it annoying, and I was wondering if there was a bit of code I could add to my .css to change it. Thank you.
A simple google search provides this very easy....
a {
text-decoration: none;
}
simply set a {text-decoration:none}
see in action:
a {
text-decoration: none
}
No Underline
EDIT (I am editing this to whoever downvote it, because that could be the only reason for)
In case you have multiple a's and some of them don't have the attribute href then you can target the href like this:
/*demo */
div {
border: dotted lightblue;
margin: 10px;
font-size:30px
}
a {
display: block;
}
/*in action*/
div:last-of-type a[href] {
text-decoration: none
}
<div>
<a>Without href doesn't make it a link</a>
Link with Underline
</div>
<div>
<a>Without href doesn't make it a link</a>
Link Without Underline
</div>
This question already has answers here:
How can I remove the outline around hyperlinks images?
(18 answers)
Closed 8 years ago.
I have this simple logout button on the right (blue coloured) button and whenever I press the logout button, that border appears
I have tried the following CSS styles:
a:active
{
border-style: none;
border: 0px;
}
and these have been tried on all <a> tag possibilities like hover, active..
Any idea what might be the cause?
this is the Jsfiddle link
http://jsfiddle.net/v1x29f9h/
It's not a border, it's the outline.
#logoutButton {
outline: none;
}
Demo http://jsfiddle.net/v1x29f9h/1/
It is outline: none;. The border would follow the border-radius path.
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 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/