CODEWITHSUNDEEP
jqueryhtmlmouseevent
knittledan
knittledan

Reputation: 764

jquery change div html onmouseover and onmouseout

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.

Upvotes: 0

Views: 2305

Answers (5)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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);
    });    
});

Upvotes: 1

sparrow
sparrow

Reputation: 177

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.

Upvotes: 1

j08691
j08691

Reputation: 207901

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);
});​

Upvotes: 2

Dave Thomas
Dave Thomas

Reputation: 3827

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

Upvotes: 0

msponagle
msponagle

Reputation: 326

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
});

Upvotes: 0

Related Questions