CODEWITHSUNDEEP
htmlcsshover
Ionamaroq
Ionamaroq

Reputation: 75

How do I make additional text appear when you hover over a menu item?

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!

Upvotes: 0

Views: 5488

Answers (3)

OttavioMonzione
OttavioMonzione

Reputation: 123

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''

Upvotes: 0

DatScreamer
DatScreamer

Reputation: 86

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.

Upvotes: 1

David Pine
David Pine

Reputation: 24535

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.]

Upvotes: 2

Related Questions