Pretty much, I am trying to add an icon of a paw next to the link once its hovered. So I want icon to be invisible, and just shows when I hover over the link. I managed to do that, but when I hover over a link, other links jump to the side due to the icon being visible. How can I make it so the links already take size of the icon into consideration and do not jump on side once it shows up on hover?
[HTML](https://i.stack.imgur.com/a1CQq.png)
[CSS](https://i.stack.imgur.com/f17Ew.png)
[Before Hover](https://i.stack.imgur.com/MMFDV.png)
[After Hover](https://i.stack.imgur.com/HQv12.png)
Since I'm still quite new in Web Dev maybe solution to the problem is quite easy. I just tried random things which I don't even remember to be honest. Was adding and removing code just to see if it will make any difference. I didn't really manage to make any difference as no matter what I do ( try to include total width of the link after hovering to the basic width when not being hovered, and push the link text to the side blah blah ), it was always the same. Links just jump to the side when I hover.
Thank you in advance.
The problem here is that elements with display:none are not rendered in the DOM, so the width of the element will not be calculated, thats why it will move if you make them visible via display:block.
there are sereval solutions for your problem. I will give you two simple solutions:
1. Use visibility
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
visibility:hidden
}
a:hover .icon.hide {
visibility:visible
}
2. Use opacity (here you would be able to add transition effects)
HTML:
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
<i class="icon hide">icon</i>Test
CSS:
.icon.hide {
opacity:0
}
a:hover .icon.hide {
opacity: 1
}
Hope this will answer your question.
Related
I'm having an issue making my image clickable. It is a cart style photo with a little number bubble that tells you how many items you have in the cart. The div is clickable but the photo itself is not.
Here is my code:
<a routerLink="/cart">
<img class="cart" src="../../../assets/canoe detail.png" alt="Canoe Cart">
<div *ngIf="quantity" class="quantity">{{quantity}}</div>
</a>
I have also tried adding a click event to the image with a function just logs ("clicking") and I have also tried adding "routerLink='/cart'" to the image tag as well, but neither of these worked.
What am I missing?
Thank you in advance!!
Your code seems fine, should work
<a class="brand-logo" routerLink="/login">
<img src="assets/img/logo-svg.svg" />
</a>
Try removing the other div and check, but should work even with it. This works for me
Add this CSS for a
a{display:inline-block}
Solved! Even though it was visible, it was behind the navbar so changing the z-index fixed it.
a {
z-index: 5;
}
I'm creating a landing page for a fictitious hat company and trying to add a "Read More" link (p within an a) and it ends up in a fixed position and I'm unable to move it using anything I know, and it also creates an odd height at the bottom of the page. I've been trying to solve this for about 30 minutes now and I don't know what I did wrong. I'm sorry if the question is phrased weirdly, here's my html and css.
https://codepen.io/youssefwael/full/KKzVgxe
The part ruining my page is in line 38;
<a href="#" id="read-more">
<p>Read More <i class="fa fa-chevron-down"></i></p>
</a>
Thanks in advance.
That's because <a> tag is a inline element.
You have to add
#read-more {
display: inline-block;
margin or padding or some code...
}
or
display: block; margin-top: ? like this
you can see the code here:
codepen
On small screens ( <720px) I have a toggle menu with a font awesome icon.
I noticed yesterday that there is a full stop appearing before the menu. I can't figure out where this is coming from.
The dot in question.
The code for the menu (taken from developer tools.)
<ul id="toggle-menu">
<li class="pullDown">
<a href="#" id="pull">
<i class="fa fa-bars fa-3x "></i>
</a>
</li>
</ul>
It it appearing in the DOM within this line, even when all elements within the li are deleted.
<li class="pullDown"></li>
The site is here
The full code is here
Thanks in advance
In your style.css add this code
#toggle-menu li {
float: right;
list-style-type: none;
}
See here for an example of it in action.
The reason that dot is there is that you're adding it as a list element -- it's not a full stop, necessarily, just the marker for a new element in an unordered list. list-style-type:none gets rid of any style for the list elements.
It's not a full stop, it's a list item bullet. You're using a list with <li> tags, and the default behaviour is to put a bullet in front of whatever is inside the <li>
The real answer here though is that your code isn't very semantically correct. Why is an icon inside of an unordered list in the first place? Consider two other options...
1) Just putting <a> containing your icon in front of the nav and leaving it at that
2) Incorporating the font awesome icon in to a :before or :after psuedo-element of the nav menu itself using CSS styling. Information about how to add icons via CSS can be found on the font awesome site.
Your toggle-menu class should contain something like
list-style: none;
I want the first of the two < i > elements to be shown when not hovering and the other one to be hidden, and when hovering I want the other way around. Is that possible with CSS or do I need to use JS?
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like-grey"></i>
<i class="sprite-io sprite-like-white"></i>
3
</a>
.postb2 .sprite-like-grey,
.postb2:hover .sprite-like-white {
display: none;
}
.postb2:hover .sprite-like-grey {
display: inline;
}
Demo
You can change it to suit your HTML (btw. I don't see three i in your code)
I think I have an idea of what you want, and it is in fact feasible in CSS alone.
If you want to show a different sprite when hovering the anchor-tag, I would go about creating the markup a bit differently.
<a class="btn btn-like postb2" href="#">
<i class="sprite-io sprite-like"></i>
3
</a>
Instead of switching between two HTML-nodes, you would probably just want to change the coordinates of what to show in your CSS-sprite:
.postb2 .sprite-like{
background-position: -80px -80px; // just some arbitrary coordinates for example purposes
}
.postb2:hover .sprite-like{
background-position: -160px -160px;
}
Another note:
I see that you're using the names "sprite-like-grey" and "sprite-like-white". I would avoid naming my css-rules after how they appear at a certain point, and rather name them after what they actual are or perform in the application.
Know that's there is already the best answer for your case, but there's something I just discover about your question and Mr_Green comment which might be usefull.
You can indeed target sibling elems in CSS with combinators using + if the elems are next to each others or ~ if no (they need to be in the same parent).
Little Fiddle to show
More info on W3C Website
It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click