I have an image with an icon on top if it:
<font-awesome-icon class="icons bookmark" icon="fa-solid fa-bookmark"></font-awesome-icon>
<img :src="images[0]" #click.native="visit(l._id)" />
But on mobile devices, it ALWAYS clicks the image behind the icon. Is there a way to prevent this?
Here are my CSS classes:
<style scoped>
img {
border-radius: 25px;
margin: 8px;
width: calc(100% - 50%);
}
.icons.bookmark {
font-size: 1.5em;
z-index: 100;
position: absolute;
top: 20px;
left: 1em;
}
.icons.bookmark:hover {
color: green;
}
</style>
here it is on the image:
Set pointer-events: all on the icon. Check it out on the mdn web docs.
I am not sure if this will solve your problem, because you said it only fails on mobile devices, but give it a try.
Related
I have a list of links on the left hand side of the page.
I would like to improve this list so that when I put the cursor over an item in this list, some sort of label appears which gives a brief description about what the link is pointing to. The html in question is generated automatically using Antora from AsciiDoc sources and, as far as I can see, all I am able to do is to add a css class or id for the different parts of the link text which are in bold. I cannot add any Javascript or nested css classes.
So here is my attempt:
<!DOCTYPE html>
<html>
<head>
<style>
#Bob.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
#Bob.tooltiptext {
font-size: 5px;
}
#Bob.tooltiptext:hover {
visibility: visible;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
font-size: 10px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
</style>
<title>Page Title</title>
</head>
<body>
<a href="http://www.bob.com" class="searchEngineLink" >
<strong id="Bob" class="tooltip">Bob</strong>
<strong id="Bob" class="tooltiptext">What a great guy!</strong>
</a>
</body>
</html>
This does not achieve what I want obviously. All it does is have one bit of text in a small font that, when I roll over it, increases into a larger font in a kind of box.
If anyone can think of some way to have a label pop up over some link in a page, even using some completely different approach that I have not thought of, I would be grateful. Note that I will have about 200 links so if I can have a solution that does not require me to have a set of css properties for every different id for each link, that would be preferable.
If any of the this question is not clear, please feel free to ask me.
Simple tooltip can be achieved by usi title attribute: The information is shown as a tooltip text when the mouse moves over the element.
<a href="http://www.bob.com" class="searchEngineLink" title="What a great guy!">
<strong id="Bob" class="tooltip">Bob</strong>
</a>
You can also make your own custom tooltip, by using content property to insert generated content. (description of each link).
.searchEngineLink {
display: inline;
position: relative;
}
.searchEngineLink:hover:after {
background: #eee;
border-radius: 5px;
bottom: -34px;
color: black;
content: attr(gloss);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: auto;
white-space:nowrap;
}
.searchEngineLink:hover:before {
border: solid;
border-color: #ddd transparent;
border-width: 0 6px 6px 6px;
bottom: -4px;
content: "";
left: 40%;
position: absolute;
z-index: 99;
}
<a class="searchEngineLink" gloss="What a great guy" href="http://www.bob.com">Bob</a>
<a class="searchEngineLink" gloss="What a smart guy" href="http://www.bob.com">Bob2</a>
<br>
<a class="searchEngineLink" gloss="What a handsome guy" href="http://www.bob.com">Bob3</a>
I have been toying with this for hours and decided to ask. I am trying to replace my checkboxes with Font Awesome icons within a circle div. When the checkbox is checked the circle color is supposed to change.
I have managed to get the icons to replace the checkboxes, but I can not get the background to change when selected. I personally think I over thought this and it could probally be done much simpler, but this is what I have.
HTML:
<div class="actions thread-actions">
<div class="checkbox visible">
<button class="action primary-action visible" title="$vbphrase[save_changes]">
<label for="cb_visible"><input type="checkbox" name="visible" value="yes" id="cb_visible" checked /></label>
</button>
</div>
</div>
CSS: (SCSS)
$brand-success: #5cb85c !default;
$brand-danger: #d9534f !default;
.thread-actions .checkbox {
input[type=checkbox] {
position: absolute;
margin-left: -100em;
margin-right: 100em;
font-size: 1em;
}
input[type=checkbox]:before {
position: absolute;
left: 99em;
}
}
/* Colors ---------------------- */
.thread-actions input[type=checkbox]:checked {
color: $brand-success;
}
.thread-actions {
input[type=checkbox]:before {
font-family: 'FontAwesome';
}
}
.thread-actions {
.checkbox.visible input[type=checkbox]:before {
content: "\f023";
margin: -22px 0px 0px 17px;
}
.checkbox.visible input[type=checkbox]:checked:before {
content: "\f023";
background-color: #ff0000;
/* f3c2 */
}
}
.actions .action {
font-size: 26px;
border: 0;
border-radius: 50%;
height: 48px;
width: 48px;
position: relative;
}
How can I achieve this effect?
I have a live PEN here where I have been playing with this.
After starting from scratch and re-thinking this through, I managed to come up with a solution.
Instead of enclosing the input with pointless divs, then trying to style each div I worked with only the input.
To achieve this effect, start by pushing the standard checkmark out of the way:
input[type=checkbox] {
font-family: 'FontAwesome'; // tell this element to use FA
position: absolute; // absolutely push this thing away
margin-left: -100em; // buh bye checkmark
font-size: 26px; // FA icon size
}
With the checkbox out of the way we can move on to styling as we wish:
input[type=checkbox]:before {
left: 100em; // where the checkmark should have been
border-radius: 50%; // circle
position: absolute; // we want it absolutely where we placed it
text-align: center; // FontAwesome icon alignment
height: 40px; // height of the circle
width: 40px; // width of the circle
background-color: #337ab7; // circle color
color: white; // icon color
content: "\f070"; // FA icon
}
With this as a base we can move on to styling our checked boxes by simply overriding our base style:
input[type=checkbox]:checked:before {
content: "\f06e"; // FA icon
background-color:#be0000; // circle color
}
Sometimes going back and rethinking things helps, hope this helps someone =)
Here is a live preview of the end result.
I have an html element like so:
<div className="sidebar-nav-main-links">
<Link to="/home">
<i><div id="home-icon"></div></i>
<p>Home</p>
</Link>
</div>
And my css looks like this:
i {
#home-icon {
background-image: image_url('clear-home-icon.png');
width: 20px;
}
}
But I can't get the image to display, let alone do a hover effect. Any ideas as to why this is? Also I'd like to change the image upon hover.
It's better to use content instead of background-image.
Example:
<i id="home-icon"></i>
css:
#home-icon {
content: url("https://cdn4.iconfinder.com/data/icons/pictype-free-vector-icons/16/home-512.png");
width: 20px;
}
#home-icon:hover {
content: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQjhOBG4ztvrvf0Jw6p_J3lMhnnKZ4TupbpIDVNy9OM38skvpi4");
width: 20px;
}
jsfiddle: https://jsfiddle.net/2pb1oevj/
You can use the following CSS with your HTML:
#home-icon {
background: url("abc.jpg");
width: 20px;
height: 16px;
display: block;
}
#home-icon:hover {
background: url("xyz.jpg");
width: 20px;
height: 16px;
display: block;
}
You can adjust height/width of the icon accordingly.
Reference: Adding Custom icon to HTML Page
I have an image link that has a :hover functionality to show text on top of the image on rollover and then on click you are taken to the new web page.
However on mobile (only been tested on safari mobile), one tap shows the hover functionality and then the second tap takes you to the page. I don't want this, I could see that being beneficial for a drop down menu, but for my use case it just makes the ui more confusing.
I want it to go straight to the page on one tap, which is what happens with normal links with a:hover.
Here's my code:
.thumb_text {
position: absolute;
top: 0;
left: 2.531645569620253%;
width: 73.83966244725738%;
padding-top: 12px;
z-index: 1;
color: white;
}
.the_line_thumb {
position: relative;
overflow: hidden;
}
.the_line_thumb img {
height: 200px;
width: 500px;
background-color: yellow;
}
.the_line_thumb_text {
display: none;
}
.the_line_thumb:hover img {
filter: brightness(40%);
}
.the_line_thumb:hover .the_line_thumb_text {
display: block;
}
<a href="https://example.com">
<div class="the_line_thumb">
<img src="example.png">
<div class="the_line_thumb_text thumb_text">
<h1>Hello Stack Overflow</h1>
<p>
Hope you're having a great day and thanks for trying to help me out.
</p>
</div>
</div>
</a>
Via saurabh (in the comments): The issue seems to be an ios issue to do with an inability to deal with the muiltiple :hover entries like desktop can.
You might want to consider the Level 4 Media Query spec which allows for direct targeting of devices which support hover.
#media(hover: hover) and (pointer: fine) {
.the_line_thumb:hover img {
filter: brightness(40%);
}
}
Demo
.thumb_text {
position: absolute;
top: 0;
left: 2.531645569620253%;
width: 73.83966244725738%;
padding-top: 12px;
z-index: 1;
color: white;
}
.the_line_thumb {
position: relative;
overflow: hidden;
}
.the_line_thumb img {
height: 200px;
width: 500px;
background-color: yellow;
}
.the_line_thumb_text {
display: none;
}
.the_line_thumb:hover .the_line_thumb_text {
display: block;
}
.the_line_thumb:hover .plus {
color: #ffbdff;
background-color: white;
}
#media(hover: hover) and (pointer: fine) {
.the_line_thumb:hover img {
filter: brightness(40%);
}
}
<a href="https://example.com">
<div class="the_line_thumb">
<img src="example.png">
<div class="the_line_thumb_text thumb_text">
<h1>Hello Stack Overflow</h1>
<p>
Hope you're having a great day and thanks for trying to help me out.
</p>
</div>
</div>
</a>
Support
I'm using (☰) and it appears on computer even when I reduce browsers width but when I check it from my mobile browser it doesn't appear, why is that? and how to show it? Is there is another way to create or use something like this icon that would work on mobile phones?
Try using this instead:
≡
mobile browsers are more able to use this unicode character! Hope it helps
just create this hamburger with css and html
HTML:
.hamburger-icon {
margin: 0;
padding: 19px 16px;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.hamburger-icon span {
width: 40px;
background-color: #000;
height: 5px;
display: block;
margin-bottom: 6px;
}
.hamburger-icon span:last-child {
margin-bottom:0px;
}
<label class="hamburger-icon">
<span> </span>
<span> </span>
<span> </span>
</label