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;
}
Related
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;
}
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''
I have a view in Drupal 7 that displays 4 user field of the currently logged-in user. I rewrote the output to the following code:
<div>[field-1]</div>
<div>[field-2]</div>
<div>[field-3]</div>
<div>[field-4]</div>
I can add some CSS classes to the fields to let everything look a little bit better, but I'm stuck at a certain point: I'd like to add a link to the block that redirects the user to his/her profile page (the url is user/[uid]). To be completely clear, I'd like the whole block to function as some kind of "button" (just like the "button" in the top menu of this website), so I don't want the seperate fields to be linked to the profile page (I know how to do that anyway).
Can this be achieved with CSS and/or HTML?
Try wrapping the 'div' in an 'a' element:
<div>[field...]</div>
Edit: This will make all the text appear as a link, so might want to add some CSS. Example:
HTML:
<a class="link-box" href="/user/id"><div>[field...]</div></a>
CSS:
.link-box {
color: #000;
text-decoration: none;
}
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>
To help protect users, you can't really style upload's with CSS. So, the solution then is to hide the real upload and show the user some other element that looks how you want.
I started a JSFiddle that shows how you could mask an invisiable real upload over a simple button or something so that you could style the button - but still get the user to click the upload input.
However, the problem is that I can't get the hover states to work since the real input is floating above the button.
Am I approaching this problem wrong? How do you style upload inputs?
After playing around some more I finally got it working by making the input a child of the Upload button element. I had to make the upload button a div also since it's not correct to have an input as the child of a button.
See it in action here
If I understand the question, this is what you want to achieve
jsfiddle.net/yVFWJ/1/
.button {
width: 47px;
height: 19px;
cursor: pointer;
text-indent: -9999px;
border: none;
background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif);
}
Hm... You could use document.onmousemove event. In there you can check if your mouse position is inside the button area. If it is, simply change the class of button to eg "send_button_hover". If it's not, change the class to just eg "send_button".
You can do it using pure JavaScript. It's not very difficult.
But it's a lot easier if you use jQuery. You have mousemove() function for handeling event; height() and width() functions to calculate button dimmension; offset functions to calculate position of the button and toggleClass() to change the class of the button.