Text change on div hover?

JavaScript
1

Hi i have some social sharing div “images”, the divs contain background images.

HTML
<div class="Conwrap4">
<p id="sharing">Sharing</p>
<div class="social3">
<div class="fbshare col-lg-3">``</div>
<div class="twshare col-lg-3">``</div>
<div class="goshare col-lg-3">``</div>
<div class="goshare col-lg-3">``</div>
</div>
</div>

I want the <p> Sharing </p> text to change depending on the div you hover

Javascript

<script>
$(".conwrap4").find("fbshare").each(function(){  //look for each img inside the #container div
  $(this).mouseover(function(){ // and when the mouse is over it
     $("p").html($(this).attr("Share on Facebook")); // put the img source as h2 text
  })
})
</script>

Why can’t i get this to work? :slight_smile:

1 Like
2

Hi,

The first thing is that you have capital C for your classname but you try calling it with conwrap4 and not Conwrap4. Then you are trying to find fbshare and not .fbshare.

$(".Conwrap4").find(".fbshare")

However, I can’t follow the logic of your code as surely you just need to cyle through elements with the same classname and then display text from an attribute as required.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style></style>
</head>

<body>
<div class="Conwrap4">
  <p id="sharing">Sharing</p>
  <div class="social3">
    <div title="Share on Facebook" class="share fbshare col-lg-3">Facebook</div>
    <div title="Share on Twitter"  class="share twshare col-lg-3">Twitter</div>
    <div title="Share on Social 3" class="share goshare col-lg-3">Social 3</div>
    <div title="Share on Social 4" class="share goshare col-lg-3">Social 4</div>
  </div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(".share").each(function(){ 
  $(this).mouseover(function(){ 
     $("#sharing").text($(this).attr('title')); 
  })
})
</script>
</body>
</html>

If you don’t want the text persistent then you will need to revert it back on mouseout or use hover() for both handlers.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.