I just want to show an icon on hover with css. I tried it like this but its not working. :(
HTML:
<button class="casino-btn">BONUS<font-awesome-icon :icon="['fas', 'gift']" class="bonus-icon"/></button>
CSS:
.bonus-icon {
visibility: hidden;
}
.casino-btn:hover + .bonus-icon {
visibility: visible;
}
There are 2 reason this isn't working for you:
To include a Font Awesome icon in HTML, you use it like this (see "How to use" for this Font Awesome icon):
<i class="fa fa-gift bonus-icon" aria-hidden="true"></i>
When you use the + in a CSS selector like this .casino-btn:hover + .bonus-icon, it means the next element, but bonus-icon is a child of the button. You just use a space to target a child, e.g.
.casino-btn:hover .bonus-icon
Working Example:
.bonus-icon {
visibility: hidden;
}
.casino-btn:hover .bonus-icon {
visibility: visible;
}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<button class="casino-btn">BONUS
<i class="fa fa-gift bonus-icon" aria-hidden="true"></i>
</button>
Related
I have 3 elements that are displayed when hovering on the img element.
the problem is that when I hover over the icons, hovering over image disrupts and icons start flashing.(hovering happens back and forth between image and icon)
I know that I can add some class like this:
.dark-shield {
pointer-events: none;
}
to icons, and it fixes it but then I wont be able to apply the click event.
I appreciate if someone can help.
here is my code for display bellow:
.invisible {
visibility: hidden;
}
<div class="container transition-3d-hover ">
<a href="{% url "gallery-post" post.id %}">
<img id="{{ post.id }}" class="rounded "
src="{{ post.photo.url }}"
onmouseenter="f(this)"
onmouseleave="f(this)"
>
</a>
<i id="complain-icon-{{ post.id }}"
class=" fas fa-angry complain-box invisible icon-big dark-shield"></i>
<i id="fav-icon-{{ post.id }}"
class=" fa fa-hand-point-up like-box invisible icon-big "></i>
<i id="score-icon-{{ post.id }}"
class=" fas fa-heart fav-box invisible icon-big "></i>
</div>
<script>
function f(e) {
var complain = "#" + "complain-icon-" + e.id
var fav = "#" + "fav-icon-" + e.id
var score = "#" + "score-icon-" + e.id
$(complain).toggleClass('invisible')
$(fav).toggleClass('invisible')
$(score).toggleClass('invisible')
}
</script>
In your code, as you can see, the icons are not a part of the image. So, the icons become invisible when you hover them. After they are invisible, you hover over the image again, and the icon becomes visible. This keeps repeating. So, here is a code snippet that would solve this issue:
.img1 {
width: 100%;
height: 100%;
}
.icon {
color: white;
font-size: 30px;
position: absolute;
top: 40%;
left: 40%;
display: none;
}
#wrapper {
float: left;
width: 50%;
height: 30%;
cursor: pointer;
}
#wrapper:hover .icon {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div id="wrapper">
<img src="https://cdn.mos.cms.futurecdn.net/wtqqnkYDYi2ifsWZVW2MT4-1200-80.jpg" class="img1">
<i class="fas fa-angry icon"></i>
<i class="fa fa-hand-point-up icon" style="top: 20%;"></i>
<i class="fas fa-heart icon" style="left: 10%; top: 20%;"></i>
</div>
</body>
</html>
Please note: This code might not work in the snippet, but it would work if you create a new file with this code.
Code explained
As I have already explained, the icons are not a part of the image. So, when you hover them, they become invisible. However, in my code, I have inserted the images, as well as the icons inside one div. Now, whenever you hover the div, the icons are visible. Since the icons are a part of the same div, they would remain visible.
<p style="display:inline" id="tags">
<span><i class="fas fa-tag"></i></span>
<p style="display:inline" contenteditable="true">`+elem.tags.join(',')+`</p>
<span style="display:inline" id ="icon_span_id" class="glyphicon">✏</span>
<br><br>
</p>
I'm trying to set icon_span_id to be visible on hover. This is my code thus far; but doesn't do the magic.
.animated_blinker {
animation: blinker 2s linear infinite;
}
#tags #icon_span_id{
visibility: hidden;
}
#tags:hover #icon_span_id{
visibility: visible;
}
What am I doing incorrectly?
Right now your inline style is just taking precedence over the hover style. Move the visibility: hidden style out from in-line and into its own style and it will work.
https://jsfiddle.net/4wt6f1y3/10/
<p id="tags">
<span><i class="fas fa-tag"></i></span>Some text
<span id ="icon_span_id" class="glyphicon">✏</span>
<br><br>
</p>
#tags #icon_span_id{
visibility: hidden;
color:red;
}
#tags:hover #icon_span_id{
visibility: visible;
color:red;
}
Here you go :
add jquery to catch event on hover and mouse leave :
this a bit of jquery :
$('#tags').mouseenter(function() {
$('#icon_span_id').removeAttr('style');}).mouseleave(function() {
$('#icon_span_id').attr('style', 'visibility:hidden');});
check code preview here :
https://codepen.io/navotera/pen/YvqGgE
So far I have this:
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
<i class="fa fa-user-circle"></i>
<i class="fa fa-id-card-o"></i>
<i class="fa fa-folder-open"></i>
</div>
If I enter text into the a tag, the text ends up looking jumbled and doesn't go under the button the way I want it to. How can I fix this?
I made a codepen that should match what you are attempting to do :
Here is the css :
.w3-sidebar {
width: auto;
}
.w3-bar-block .w3-bar-item {
/* Overrides default rule */
text-align: center;
}
.sidebar-icon-label {
display: block;
font-size: 10px;
}
You'll see that I removed the inline style of your w3-sidebar, and set it to "auto" instead, which means it will have the size of its content.
I created a new class for your icon labels, and overrode a native w3 rule to center everything.
Update your code Like this
<style>
i{ width:20px;
height:20px;
display:inline-block; }
a{ float:left; width:100%; text-align:center; }
span{ float:left; width:100%; text-align:center; }
</style>
<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge"
style="width:70px">
<i class="fa fa-user-circle"></i><span>Text 1</span>
<i class="fa fa-id-card-o"></i><span>Text 1</span>
<i class="fa fa-folder-open"></i><span>Text 1</span>
</div>
I have a link with a dropdown menu. Problem is that when I click on the link the dropdown opens but there is unwanted border line on the bottom of the link. When i hover on the dropdown link the unwanted bottm line hides. But whenever mouse out from the link the unwanted bottom line displays again.
Here is my code:
<div class="dropdown">
<i class="fa fa-gear fa-lg"></i> <span class="caret"></span>
<ul class="dropdown-menu pull-right" aria-labelledby="dropdownMenu2">
<li><i class="fa fa-align-left"></i> Reorder Pages</li>
<li><i class="fa fa-trash"></i> Delete</li>
</ul>
</div>
Demo is here:
Probably border, outline or underline.
Try this:
a.dropdown-toggle {
border: none;
outline: none;
text-decoration: none;
}
You can try and see if there is only one border bottom tho and cancel it only in case you want to use other borderlines.
In a:toggle Class have Text Decoration . Remove the text decoration.
a:hover {
color: #23527c;
text-decoration: underline;
}
Now you have
.dropdown-toggle:hover {
text-decoration: none;
}
just add
.dropdown-toggle:hover,
.dropdown-toggle:focus {
text-decoration: none;
}
in your css, it resolves issue!
Jsfiddle-example
I am trying to POST to a server using <button type="submit"> save </button> but I need to style the button to look a certain way using css.
Here is what im trying to accomplish:
But this is what i get:
I need to style the button element to look like the correct image and remove the default button styles.
CSS
.inner-button
{
color: #008db8;
}
.inner-button:hover
{
color: #ad9961;
cursor: pointer;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button class="inner-button" type="submit" >
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x img-responsive"></i>
<i class="fa fa-floppy-o fa-stack-1x fa-inverse img-responsive"></i>
</span><br />
<b>Save</b>
</button>
You just have to remove the default CSS styling.
.inner-button {
background: none;
border: none;
margin: 0;
padding: 0;
}