CODEWITHSUNDEEP
javascripthtml
derekwiking
derekwiking

Reputation: 1

Display text on mouseover

Hy there, this is what I have reached since now:

 <script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) { 
 item.className=(item.className=='hidden')?'unhidden':'hidden'; }}
 </script>
<h3><strong><a href="javascript:unhide('Juli');"><span style="color:#000000;">Juli</span></a></strong></h3>
<div id="col2">
    <div id="Juli">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Von</th>
                    <th>Bis</th>
                    <th>Promoter</th>
                    <th>Strecke</th>
                    <th>Preis</th>
                    <th>Anmeldung</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>08.07.2013</td>
                    <td>08.07.2013</td>
                    <td><a href="index.php/en/events-promoters/rehm">REHM RACEDAYS</a></td>
                    <td>Imola</td>
                    <td>245,00 €</td>
                    <td><a href="">ausgebucht</a></td>
                </tr>
                <tr>
                </tbody>
        </table>
    </div>
    <h3>
        <strong><a href="javascript:unhide('August');"><span style="color:#000000;">August</span></a></strong></h3>
    <div id="col3">
        <div class="hidden" id="August">
            <table class="table table-striped">
                <thead>
                    <tr>
                                            <th>Von</th>
                        <th>Bis</th>
                        <th>Promoter</th>
                        <th>Preis</th>
                        <th>Link</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <p>
            &nbsp;</p>
        <p>
            &nbsp;</p>
    </div>
</div>

and here the URL: http://www.dieraber.altervista.org/index.php/en/rennstrecken-terminenn I would like that on clicking the month the table is displayed just like it is now, and that on mouseover the month link it is displayed too. Can anyone help me? Thx

Upvotes: 0

Views: 13023

Answers (3)

SHernandez
SHernandez

Reputation: 1120

There is also the title attribute:

<span title="this is the tooltip text">hove me</span>

Upvotes: 0

theftprevention
theftprevention

Reputation: 5213

You can attach the onmouseover and onmouseout attributes to your hyperlinks.

<a href="javascript:unhide('Juli');" onmouseover="unhide('Juli');" onmouseout="unhide('Juli');"><span style="color:#000000;">Juli</span></a>

I notice you're using the same function to hide and unhide. You may want to create two separate functions, because with the code I've supplied, hovering the mouse over the link will unhide it, but clicking the link will then hide it again.

Upvotes: 2

Ian Clark
Ian Clark

Reputation: 9357

You could probably do that without JavaScript with just CSS:

.item-page h3:hover + div .hidden { 
    display:block;
    visibility:visible;
}

Upvotes: 0

Related Questions