Unable to set multiple attribute using jQuery

Below is the HTML Code:

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

I am unable to change the content of the horsename element based on hover on shadowfax element.

I am using jQuery v3.3.1 and Bootstrap v4.

Thanks

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

Check your function's syntax, I think there's the problem.

– J. Almandos
Nov 22 '18 at 12:48

add a comment |

Below is the HTML Code:

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

I am unable to change the content of the horsename element based on hover on shadowfax element.

I am using jQuery v3.3.1 and Bootstrap v4.

Thanks

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

Check your function's syntax, I think there's the problem.

– J. Almandos
Nov 22 '18 at 12:48

add a comment |

Below is the HTML Code:

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

I am unable to change the content of the horsename element based on hover on shadowfax element.

I am using jQuery v3.3.1 and Bootstrap v4.

Thanks

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

Below is the HTML Code:

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

I am unable to change the content of the horsename element based on hover on shadowfax element.

I am using jQuery v3.3.1 and Bootstrap v4.

Thanks

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

$('#shadowfax').hover(function () {

  $('#horsename').attr({

    class: 'display-5',

    text: 'Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...'});

},

function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

javascript jquery

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

edited Nov 22 '18 at 13:00

Shiladitya

9,41892030

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

asked Nov 22 '18 at 12:46

Rajiv Iyer

104

Check your function's syntax, I think there's the problem.

– J. Almandos
Nov 22 '18 at 12:48

add a comment |

Check your function's syntax, I think there's the problem.

– J. Almandos
Nov 22 '18 at 12:48

Check your function's syntax, I think there's the problem.

– J. Almandos
Nov 22 '18 at 12:48

add a comment |

4 Answers
4

active

oldest

votes

Here you go with a solution

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

The way you are setting text, will only set a text attribute instead of changing the text.

$('#horsename').text(UPDATED_TEXT) will update the DOM text, whereas $('#horsename').attr("text", UPDATED_TEXT) will add a text attribute with UPDATED_TEXT value.

Hope this will help you.

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

add a comment |

You have syntax issues in your code.

Code sample with the right solution:

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

add a comment |

You can simply use events on HTML elements like this -

<div class="col-sm">

        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">

    </div>

    <div class="row">

      <div class="col-lg">

          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>

      </div>

    </div>

Working Example

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

add a comment |

You should use .text() and toggleClass() OR (addClass / removeClass) methods on horsename element -

Note: There is end div tag with no start tag present in your posted html. Please verify it on your end.

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53431378%2funable-to-set-multiple-attribute-using-jquery%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

Here you go with a solution

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

The way you are setting text, will only set a text attribute instead of changing the text.

$('#horsename').text(UPDATED_TEXT) will update the DOM text, whereas $('#horsename').attr("text", UPDATED_TEXT) will add a text attribute with UPDATED_TEXT value.

Hope this will help you.

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

add a comment |

Here you go with a solution

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

The way you are setting text, will only set a text attribute instead of changing the text.

$('#horsename').text(UPDATED_TEXT) will update the DOM text, whereas $('#horsename').attr("text", UPDATED_TEXT) will add a text attribute with UPDATED_TEXT value.

Hope this will help you.

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

add a comment |

Here you go with a solution

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

The way you are setting text, will only set a text attribute instead of changing the text.

$('#horsename').text(UPDATED_TEXT) will update the DOM text, whereas $('#horsename').attr("text", UPDATED_TEXT) will add a text attribute with UPDATED_TEXT value.

Hope this will help you.

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

Here you go with a solution

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

The way you are setting text, will only set a text attribute instead of changing the text.

$('#horsename').text(UPDATED_TEXT) will update the DOM text, whereas $('#horsename').attr("text", UPDATED_TEXT) will add a text attribute with UPDATED_TEXT value.

Hope this will help you.

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

.display-4 {

  font-size: 14px;

}



.display-5 {

  font-size: 18px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

edited Nov 22 '18 at 12:54

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

answered Nov 22 '18 at 12:53

Shiladitya

9,41892030

add a comment |

You have syntax issues in your code.

Code sample with the right solution:

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

add a comment |

You have syntax issues in your code.

Code sample with the right solution:

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

add a comment |

You have syntax issues in your code.

Code sample with the right solution:

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

You have syntax issues in your code.

Code sample with the right solution:

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

$('#shadowfax').hover(function () {

  $('#horsename')

    .attr("class", 'display-5')

    .text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

}, function () {

  $('#horsename').text('A Horse with no name');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

  <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

  <div class="col-lg">

    <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

answered Nov 22 '18 at 12:54

Konstantin Kudelko

1278

add a comment |

You can simply use events on HTML elements like this -

<div class="col-sm">

        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">

    </div>

    <div class="row">

      <div class="col-lg">

          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>

      </div>

    </div>

Working Example

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

add a comment |

You can simply use events on HTML elements like this -

<div class="col-sm">

        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">

    </div>

    <div class="row">

      <div class="col-lg">

          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>

      </div>

    </div>

Working Example

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

add a comment |

You can simply use events on HTML elements like this -

<div class="col-sm">

        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">

    </div>

    <div class="row">

      <div class="col-lg">

          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>

      </div>

    </div>

Working Example

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

You can simply use events on HTML elements like this -

<div class="col-sm">

        <img id="shadowfax" onmouseover='onMouseHover()' src="images/horse.jpg" alt="ShadowFax">

    </div>

    <div class="row">

      <div class="col-lg">

          <p class="display-4" onmouseout='onMouseOut()' id="horsename">A Horse with no name</p>

      </div>

    </div>

Working Example

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

answered Nov 22 '18 at 12:59

Pardeep Jain

38.7k16102138

add a comment |

You should use .text() and toggleClass() OR (addClass / removeClass) methods on horsename element -

Note: There is end div tag with no start tag present in your posted html. Please verify it on your end.

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

add a comment |

You should use .text() and toggleClass() OR (addClass / removeClass) methods on horsename element -

Note: There is end div tag with no start tag present in your posted html. Please verify it on your end.

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

add a comment |

You should use .text() and toggleClass() OR (addClass / removeClass) methods on horsename element -

Note: There is end div tag with no start tag present in your posted html. Please verify it on your end.

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

You should use .text() and toggleClass() OR (addClass / removeClass) methods on horsename element -

Note: There is end div tag with no start tag present in your posted html. Please verify it on your end.

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

var $horsName = $('#horsename');

$('#shadowfax').hover(function () {

      $horsName.toggleClass('display-5');

      $horsName.text('Ive been through the desert on a horse with no name. It felt good to be out of the rain. In the desert you can remember your name. Cause there aint no one for to give you no pain...');

    },

    function () {

        $horsName.toggleClass('display-5');

        $horsName.text('A Horse with no name');

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="col-sm">

   <img id="shadowfax" src="images/horse.jpg" alt="ShadowFax">

</div>

<div class="row">

 <div class="col-lg">

      <p class="display-4" id="horsename">A Horse with no name</p>

  </div>

</div>

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

edited Nov 22 '18 at 13:01

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

answered Nov 22 '18 at 12:54

Bhushan Kawadkar

23.5k42149

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg