jquery change div html onmouseover and onmouseout

Question

What I am looking for:

I have a number of divs that are used to label columns. I want to change the text of the div from its original text to sort options like (ASC | DESC | None) when the user hovers over the div then when the user leave the div change it back to its original title. I want to create functions that can be called form the div themselves so i can reuse the code for all the column title divs.

I have a div:

<div class='headerOwner'>Owner

I want the text of the div to change into:

<div class='headerOwner'>ASC | DESC | None

When the user hovers over the div then change back to Owner when the user leaves the div

What I am doing is calling a function from the html div and passing the class name to the function so all the execution can happen based on what div you are hovered over. Then when the user leaves the div it returns to its original text. I am obviously doing this wrong. could someone explain clearly the steps to do inorder for this to happen properly. I am a python and php programmer so I understand code. But jquery seems to boggle my mind.

<script type="text/javascript">

function sortShow(x)
{
var headText = $("."+x).html();
    $("."+x).html('<a href="#">ASD</a> | <a href="#">DESC</a>');
}
function sortHide(y)
{
    $("."+y).html(headText);
}

</script>

<div class='headerID' onmouseover='sortShow($(this).attr("class"))' onmouseout='sortHide($(this).attr("class"))'>ID</div>
<div class='headerOwner'>Owner</div>
<div class='headerQueue'>Queue</div>
<div class='headerSubject'>Subject</div>
<div class='headerType'>Type</div>
<div class='headerProduct'>Product</div>
<div class='headerHost'>Host</div>
<div class='headerEmail'>Email</div>

Thanks for the help.

Try to remove `var` before `headText`. – Engineer Mar 30 '12 at 20:38 — Engineer, Mar 30 '12 at 20:38

score 2 · Answer 1 · answered Mar 30 '12 at 20:42

Since you're using jQuery, why not do it like this jsFiddle example?

jQuery:

var orig;
$('div').hover(function() {
    orig = $(this).html();
    $(this).html('<a href="#">ASD</a> | <a href="#">DESC</a> | None');

}, function() {
    $(this).html(orig);
});

score 1 · Answer 2 · answered Mar 30 '12 at 20:42

Since you're using jQuery you can set it up so that it gets them in the javascript without going into the html.

something like:

$(document).ready(function(){
    $("div[class*=header]").hover(
        function(){
            //function when hovering, change $(this).html
        },
        function(){
            //function on mouse leaving, change $(this).html again
        }
    );
});

If you give each div an id, you can then reset the html of the div to that id on mouse out.

Thanks for showing how to select classes with similar class names — knittledan, Mar 30 '12 at 22:07

score 1 · Accepted Answer · answered Mar 30 '12 at 20:43

1

Since you are using jQuery, you can use .hover function like below,

DEMO

$(document).ready (function () {
    var headText = '';
    $('.headerID').hover(function() {
        headText = $(this).html();
        $(this).html('<a href="#">ASD</a> | <a href="#">DESC</a>');
    }, function() {
        $(this).html(headText);
    });    
});

answered Mar 30 '12 at 20:43

Selvakumar Arumugam

79,297
15
120
134

This is the the most straight forward answer. Thanks for showing me the proper way of doing this using the technique i was set out to use. – knittledan Mar 30 '12 at 22:10
Could you explain how the mouse out is recognized? after $('.headerID').hover(function() {...} i see function(){ .. } is this just a set way of saying do this if not hovering? – knittledan Mar 30 '12 at 22:15
1

@knittledan hover function takes 2 args, `.hover(function() {...}, function() {...});` -> 1st function is `mousein` handler and 2nd function is `mouseout` handler. – Selvakumar Arumugam Mar 30 '12 at 22:25

score 0 · Answer 4 · answered Mar 30 '12 at 20:37

Here is a fiddle to help you out. http://jsfiddle.net/hRLtM/1/

You can add an ID to the button and add listener via Jquery in your javascript.

$('[id]').mouseenter(function(){
  //perform hover function
});

$('[id]').mouseout(function(){
  //revert from hover
});

score 0 · Answer 5 · answered Mar 30 '12 at 20:38

0

One thing I noticed.

Declare headText outside of function sortShow, right now it is hidden from the function sortHide. It will be visible to sortHide when declared outside of sortShow.

var headText;
function sortShow(x)
{
   headText = ...

answered Mar 30 '12 at 20:38

Dave Thomas

3,667
2
33
41

I was figuring everything even variables had to be wrapped in a function or a document ready function. Thanks for showing me functions can float outside of functions in jquery – knittledan Mar 30 '12 at 22:08

jquery change div html onmouseover and onmouseout

5 Answers5