<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
Related
i am trying to make a home page for my browser
when i hover over stackoverflow many others divs(clickable links) become visible
but when i move my mouse to click over them the hover state is undone and i am unable to click them does anyone can give me general idea of how to deal with it , i want to make the hover affect stay even after removing the house for some time
.wrapper{
border:1px solid red;
}
label#stackoverflow:hover ~ a
{
opacity: 1;
height: auto;}
a{
transition: all 5s ease;
opacity: 0;
height: 0;}
<div class="searchcontainer">
<div class="wrapper">
<label
id="stackoverflow" for="stackoverflow"><img
name="stackoverflowask"
class='selector'
src="./assets/Stack_Overflow_icon.svg"><span
class="stack black">stack</span><span
class="overflow black">overflow</span>
</label></br>
<a href="https://stackoverflow.com/questions/ask">
<label
id="substackoverflow"><span
class="ask black">Ask </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/questions">
<label
id="substackoverflow"><span
class="see black">See </span><span class="question black">Question</span>
</label>
</a></br>
<a href="https://stackoverflow.com/users/14266024/infinity">
<label
id="substackoverflow"><span
class="look black">Look At </span><span class="question black">Profile</span>
</label>
</a></br>
</div>
</div>
Something along these lines should point you in the right direction.
When the a tag is inside the label tag, you are technically still hovering over the label when your cursor is over it's children.
a.subitem {
opacity: 0;
transition: all 0.5s;
}
label:hover a.subitem {opacity: 1}
<div>
<label>Stackoverflow <a class="subitem" href="#">SomeLink</a></label>
</div>
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>
I have a link in text on this page, https://melodylakerart.com/product/sun-on-skin-mask-duplicate-1/ which when hovered over produces a pop up image.
As you can see, the text is broken - all the text between "sensitive' and 'off" should be on one line (including the link)
How do I get rid of the weird line breaks?
CSS is:
.hover_img a {
position: relative;
}
.hover_img a span {
position: absolute;
display: none;
z-index: 99;
}
.hover_img a:hover span {
display: block;
}
.hover_img a:hover span {
display: block;
width: 350px;
}
HTML is:
Sensitive ears? Add an
<div class="hover_img">
<a href="#">adjustable silicone strap
<span>
<img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
</span>
</a>
<div>
to take the pressure off
The addon is doing something strange with the internal div. It wraps the content in a p tag and pushes the div outside. Best to remove it as not needed and move the class name to the a tag (except)..... Change the a to a span because then you wont have the clickable behaviour.
Change the html to:
Sensitive ears? Add an <span class="hover_img">adjustable silicone ear protector strap <span><img src="https://melodylakerart.com/wp-content/uploads/2020/06/Mask-extenders-2.jpg" alt="image" height="100"></span></span>to take the pressure off.
Modify the Css:
span.hover_img { position:relative; color:#f66f61; }
span.hover_img span { position:absolute; display:none; z-index:99; }
span.hover_img:hover span {display: block;width: 350px;}
you have some problemes with the HTML tags organisation
try to replace the the full <div class="hover_img"> with this code
<div class="hover_img">
<p>
<span>Sensitive ears? Add an </span>
<a href="#">adjustable silicone strap
<span>
<img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
</span>
</a>
<span>to take the pressure off</span>
</p>
<p class="form-row form-row-wide wc-pao-addon-wrap wc-pao-addon-22252-0-0">
<label><input type="checkbox" class="wc-pao-addon-field wc-pao-addon-checkbox" name="addon-22252-0[]"
data-raw-price="1.50" data-price="1.5" data-price-type="quantity_based"
value="face-mask-strap-extension-loop-ear-protector"
data-label="Face Mask Strap Extension Loop Ear Protector"> Face Mask Strap Extension Loop Ear Protector
(+<span class="woocommerce-Price-amount amount"><span
class="woocommerce-Price-currencySymbol">£</span>1.50</span>)</label>
</p>
<div class="clear"></div>
</div>
I have challenged myself to create a visually dynamic and interactive experience in HTML and CSS only (No Javascript). So far, I haven't come across any feature I needed that I couldn't do in pure CSS and HTML. This one is perhaps a bit more difficult.
I need to prevent the user from double-clicking<a>, <input type="submit"> and <button> tags. This is to prevent them double-submitting a form or accidentally making 2 GET requests to a URL. How can this be done in pure CSS? Even if we can't set disabled without JS, there should be some masking technique or combination of styles that can handle it here in 2020.
Here is a simple example of an attempt:
.clicky:focus{
display: none;
pointer-events: none;
}
test
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p id="down">target</p>
Unfortunately, this disables it before the actual click event is fired for some reason. Maybe anchors aren't the best way to test? I will continue to make further attempts.
One idea is to have a layer that come on the top of the element after the first click to avoid the second one.
Here is a basic idea where I will consider a duration of 1s between two clicks that you can decrease. Try to click the button/link and you will notice that you can click again only after 1s.
I am adding a small overlay to better see the trick
.button {
position:relative;
display:inline-block;
}
.button span{
position:absolute;
top:0;
left:0;
right:0;
bottom:100%;
z-index:-1;
animation:overlay 1s 0s; /* Update this value to adjust the duration */
transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}
.button *:active + span {
animation:none;
bottom:0;
transition:0s 0s;
}
#keyframes overlay {
0%,100% {
z-index:999;
background:rgba(255,0,0,0.2); /* To illustrate */
}
}
<div class="button">
<button>Click me</button>
<span></span>
</div>
<div class="button">
Click me
<span></span>
</div>
The first solution
The idea is to use radio button state by :checked to make modifications. We hide radio circle and when :checked for <a> make pointer-events: none; and for buttons with different types we hide them and show disabled ones.
div {
margin: 10px;
}
#radio0, .my-checkbox {
position: absolute;
height: 0;
width: 0;
opacity: 0;
}
#radio0 + a label {
cursor: pointer;
}
#radio0:checked+a {
pointer-events: none;
}
.btn-one,
.btn-two {
padding: 0;
}
.btn-one>label,
.btn-two>label {
padding: 1px 6px;
}
.my-checkbox:checked+.btn-one {
display: none;
}
.btn-two {
display: none;
}
.my-checkbox:checked+.btn-one+.btn-two {
display: inline-block;
}
<div>
<input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
<a href="#">
<label for="radio0">
Click the link!
</label>
</a>
</div>
<div>
<input type="radio" id="radio1" class="my-checkbox">
<button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
<label for="radio1">Click the button!</label>
</button>
<button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
<label for="radio1">Click the button!</label>
</button>
</div>
<div>
<input type="radio" id="radio2" class="my-checkbox">
<button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
<label for="radio2">Submit!</label>
</button>
<button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
<label for="radio2">Submit!</label>
</button>
</div>
The second solution
This one suits for links. The idea is to use :target. Targe element is hidden firstly. Then when is targeted use :target to pointer-events: none; of <a>.
#anchor {
display: none;
}
#anchor:target {
display: block;
}
#anchor:target+a {
pointer-events: none;
}
<div>
<span id="anchor"></span>
Click the link!
</div>
Hi I am trying to make a website with CSS and want to know if it is possible to hide the text according to language. We use an asp website and languages are English and French. For simplicity of the person who will document the FAQ, I am obliged to do html(No template and DB). I want to do a CSS code that it check if the languageCode is "EN" or "FR" and put invisible tags where the language is not select. I can do Javascript to change CSS but because I use CSS to hide and show my question-anwser, I wanna know if I can do it with only CSS.
Here a sample of what the template is, wher the info I want and where I want to apply css after.:
<div>
<div>
<div>
<div class="languageCode" id="fr" style="display: none; visibility: hidden;">fr</div>
</div>
</div>
</div>
<div class="MainContent">
<div>
<h1>FAQ</h1>
<label><input type="checkbox" id="language" />Français ?</label>
<ul class="collapse-list">
<li class="fr">
<label class="collapse-btn" for="question-1">
Titre FR1
</label>
<input class="collapse-open" type="radio" id="question-1" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
texte
</p>
</div>
</div>
</li>
<li class="en">
<label class="collapse-btn" for="question-2">
Title EN1
</label>
<input class="collapse-open" type="radio" id="question-2" name="question" aria-hidden="true" hidden="hidden"/>
<div class="collapse-panel">
<div class="collapse-inner">
<p>
text
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
Here a small part of the CSS
.collapse-open
{
display: none;
}
.collapse-panel
{
display: none;
margin-left: 10px;
}
.collapse-open:checked ~ .collapse-panel
{
display: block;
}
Here the part that I want to do but I can't say how to make it work
#fr.languageCode ~ .fr{
visibility: hidden;
display: none;
}
#fr.languageCode ~ .en{
visibility: visible;
}
#en.languageCode ~ .fr{
visibility: visible;
}
#en.languageCode ~ .en{
visibility: hidden;
display: none;
}
Like if the ID is #fr you display only french content and if ID is #en you display only english content.
Note: I know the selector in my CSS doesn't work but I can't find what I should use or if it's possible to do what I want without javascript.
You can try using :lang selector css. But, it can be tricky taking into account all cases, xml lang etc. I think the javascript to detect the user's browser's language is simple, so why not just set a global class based on that, and then you can hide / show with css accordingly. You do need to make sure you've got a complete list of possible lang values.
var language = window.navigator.userLanguage || window.navigator.language;
alert(language);
document.getElementById('content').className = language;
div {
visibility: hidden;
}
#content.fr .french {
visibility: visible;
}
#content.en-US .english {
visibility: visible;
}
#content.sp .spanish {
visibility: visible;
}
<div id="content" class="default">
<div class="french">Si votre navigateur préférence lang est francais , vous devriez voir cette
</div>
<div class="english">If your browser lang preference is ENGLISH you should see this
</div>
<div class="spanish">Si su navegador lang preferencia es espanol debería ver esto
</div>
</div>