CODEWITHSUNDEEP
jqueryhtml
John Abraham
John Abraham

Reputation: 18811

Dynamically select text from div and set with mouseenter & mouseleave

I feel like my logic makes sense; unfortunately, it doesn't :( ?
UPDATE: livecode Question:
How can I on mouseenter grab $(this).attr.('title') and set that text to ('HGROUP h1')'s text?

jQuery 

$("div.box").on('mouseenter', function () { //select the box create mouseenter function
    var headerText = $(this).attr('title'); //get selected title and set to headerText
    $('HGROUP h1').text(headerText); //set hgroupd h1 text to headerText
});

$("div.box").on('mouseleave', function () { //select the box create mouseleave function
    $('HGROUP h1').text('DESIGNOBVIO.US'); //set the orginal text back in place on mouseleave
});

HTML

<div class="box">
<h1 title="can i haz it?2"></h1>
<div class="innerbox">
    <figure></figure>
    <ul class="categorySelect">
        <li class="misc"></li>
        <li class="print"></li>
        <li class="video"></li>
        <li class="web"></li>
    </ul>
</div>

Hgroup HTML

<HGROUP>
 <h1>designobvio.us</h1>
 <h2>the colors duke, the colors!7</h2>
</HGROUP>

Any further explanation of where i went wrong would be awesome.

Upvotes: 0

Views: 183

Answers (3)

Nishu Tayal
Nishu Tayal

Reputation: 20860

You should use find to get title.

var headerText = $(this).find('h1').attr('title');

Try this :

  $("div.box").on('mouseenter', function () { 
 //select the box create mouseenter function
  var headerText = $(this).find('h1').attr('title'); 
  //get selected title and set to headerText
   console.log(headerText);
    $('HGROUP h1').text(headerText); //set hgroupd h1 text to headerText
 });

 $("div.box").on('mouseleave', function () { 
       //select the box create mouseleave function
     $('HGROUP h1').text('DESIGNOBVIO.US'); 
     //set the orginal text back in place on mouseleave
 });​

Here is demo

Upvotes: 0

gdoron
gdoron

Reputation: 150283

Change this:

var headerText = $(this).attr('title');

To:

var headerText = $(this).find('h1').attr('title');

Your code is trying to get the title of div instead of it's <h1> child .

Upvotes: 1

Anthony Atkinson
Anthony Atkinson

Reputation: 3248

Looks like you need to be using:

var headerText = $(this).find('h1:first').attr('title');

Upvotes: 1

Related Questions