I want to make my text disappear and keep it away when I hover over it, but I don't know how. Can you guys help me out?
This is my CSS
p:hover {
display: none;
}
and this is my html:
I want to be your <p>girl</p>friend.
Thank you in advance for your help!
Make the text you want to disappear have a specific id and the outer text have a specific text as well.:
<p id="text">I want to be your <span id="disappear">girl</span>friend.</p>
CSS alone will not work for this, because once you hover the element to make it disappear, it will no longer be hovering and will just reappear. This will cause it to continually flicker. So for this, we'll need some Javascript:
var disappear = $("#disappear");
$("#text").hover(function(){
disappear.hide();
}, function() {
disappear.show();
});
This Javascript stores the disappear element as an object. It then waits for the text element to be hovered and "unhovered" over (the first parameter is for hover, the second is for "unhovering"). When text is hovered, disappear is hidden using .hide();. When text is unhovered, disappear is shown using .show();.
Here's a fiddle for it: JSFiddle
Assign a class to your "p" tag and then give the class:hover attribute, display: none;
HTML:
I want to be your <p class="disp">girl</p> friend.
CSS:
.disp:hover {
display: none;
}
Related
i have been fiddling around with this for a few hours now.
I have a vertical elementor nav menu and i want to apply a hover affect to it.
So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.
Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:
Example 1:
Example 2:
What i want it to be like is on the end of the text - which is differnet for each menu item.
Like This:
My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.
Thank you.
Max
You can not select only text. The text must be inside a html tag.
For example:
div {
color: green;
}
p {
color: red;
}
span {
color: blue;
}
<div>
<p>I am selectable with p { }</p>
I am not selectable as I am a text element of root div tag.
<span>Again I am selectable as I am wrapped with span tag.</span>
<div>
A link to the site would be helpful.
But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.
Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.
Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.
I'm trying to make text show up on hover after a menu item (so if the menu says HOME I'd want WERE THE HEART IS to show up when I hover over the home part). I found this question with a way to do it (http://bit.ly/1UgPYoK) but I can't locate the menu div in my theme's files in order to add the hidden text div after it. Can I add the div for the hidden text somewhere else or does it have to be contained in the div for the hover item? Is there an easy way to find where the menu text is located in the code? I hope this all makes sense... I researched a bunch of questions and I understand how to do it if I can just find the right div. I'm very new to this!
I believe that you're looking for the HTML title attribute. Consider the following:
<div>Hover over <span title="IS WERE THE HEART IS...">HOME</span></div>
Or is this not at all what you're looking for?
http://www.w3schools.com/tags/att_global_title.asp
Update
[Disclaimer, this is a purely HTML answer - and doesn't utilize CSS.]
This is done with CSS and HTML. What you do is take advantage of CSS display tag. You can go more advanced and style with more accuracy because you could add any other tags inside the span (i.e div,ul...) into it and make a block with colors that look the same in all browsers.
.more-info {
display: none;
}
p:hover .more-info {
display: inline-block;
}
<p>Home<span class="more-info">Is where the heart is.</span></p>
If this does not help you then please clarify:
You can't locate the menu div?
Please provide what code you are working with so we may explore your question in further detail.
You could simply locate the item by Its own id through document.getElementById(item_id) and then set the title AND the alt property to make sure that is cross-compatible.
var item=document.getElementById(foo_id); item.alt='text you want to show; item.title='same here''
Key word of my post is boxe***s***, emphasis on the plural. The code I am using will not allow me to reuse the hover on multiple pieces of text. Only one of the hovers will work at a time and the rest are frozen in place, as if they were text boxes with no hover (no hide and then reveal).
Please help me! I appreciate any input.
Here is the link to the code:
http://pastebin.com/dRgj8e1D
Basically your code is only setting up toggling for the very first toggle, as shown in the window.onload section. To make multiple instances work, you would need to get the ID of each toggle button and call the toggle setup function for each one.
An easier way to accomplish this would be to change the ID on the button to a class and use hover styles in the CSS:
.togContent {
display: none;
}
.togTrigger:hover + .togContent {
display: block;
}
I have an interactive background that uses css to change opacity on hover. On top of this (absolute positioned) is a text layer. In order to allow for the background to react even with the text on top I have added css pointer-event:none to the div containing text.
This works well, but it would be better if I could still keep the ability to highlight the text.
Does anyone know away to limit which pointer-events are suppressed?
Actually you can't do what you want. If you disable pointer-event, text can't be selected. But you can do this functional by some jquery magic.
first you put background hover effects into some class:
.hov{background: black !important;} //just example
then assign it to hover effect:
$('#wrap').hover(function() {
$('#wrap').toggleClass("hov");
});
and translate hover event from you block into you background:
$('#block').hover(function(e) {
$('#wrap').trigger(e.type);
});
So look into fiddle and you'll understand
EXAMPLE
Is it possible without JS/jQuery?
For example: I've got three divs with background images. I want to toggle one description for each image on click. Then, after clicking another image, I need to hide previous description and show one related.
One description can be displayed instantly after page load. There will be content below those paragraphs.
You can use the pseudo class :target and a link with href set to the id of the element that you want to show.
Simple demo
Demo with three images and three descriptions
Demo with transitions
#show {
display: none;
}
#show:target {
display: block;
}
HTML
Click me
<div id="show">Show me!</div>