Trying to make a different column highlight when mousing over a div

Question

I am working on creating a recipe display for my homepage. When you hover over the roasted pepper and artichoke tapenade box, i want the image to the left of it to trigger its mouseover event. I also want to do the reverse. So if you hover over the image left of the roasted pepper box, the text on the right should trigger its mouseover event. Also, the recipe boxes only show if the screen size is greater than 768px. I am hiding this on mobile. Hoping someone can help. I have been trying many different techniques with no success. I am not sure how to do this correctly. Thanks!

$('.recipeHighlight').hover(
   function(){ $(this).addClass('recipeOverlayStyle') }, 
   function(){ $(this).removeClass('recipeOverlayStyle') }
)

<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="https://www.cento.com/css/styles.css" rel="stylesheet">
<link href="https://www.cento.com/css/image-effects.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!-- Featured Recipes Row -->
<div class="visible-lg visible-md"> 
<section id="cento-white-background-half-padding-background" data-speed="4" data-type="background">
 <div class="container">
  <div class="row">  
   <div class="col-md-12">
    <img class="img-responsive recipeContainerImg" src="images/logos/cento_logo.png" width="200px" alt="Cento Fine Foods"> 
    <h1 class="center">RECIPES FROM OUR KITCHEN</h1>
    <br>
   </div> 
  </div>
  <!-- Recipe Row #1 Start --> 
        <div class="row rowBackground"> 
         <div onclick="void(0)" class="col-md-3 col-img">
              <div class="hovereffect"> 
                    <img class="img-responsive" src="https://www.cento.com/images/recipes/appetizers/roasted-pepper-artichoke-tapenade.jpg" alt="Roasted Pepper and Artichoke Tapenade">
                    <div class="overlay">
               <a class="info" href="https://www.cento.com/recipes/appetizers/roasted-pepper-artichoke-tapenade.php">View Recipe</a>
           </div>
                </div>  
            </div>
   <div class="col-md-3 col-img recipeBG recipeHighlight">
             <h1>Roasted Pepper & Artichoke Tapenade</h1>  
   </div>
   <div onclick="void(0)" class="col-md-3 col-img">
              <div class="hovereffect">
                    <img class="img-responsive" src="https://www.cento.com/images/recipes/appetizers/olive_tapenada.jpg" alt="Olive Tapenade">
                    <div class="overlay">
               <a class="info" href="recipes/appetizers/olive_tapenada.php">View Recipe</a>
           </div> 
                </div>  
            </div> 
   <div class="col-md-3 col-img recipeBG recipeHighlight">
             <h1>Olive<br>Tapenade</h1>  
   </div>
     </div>
 </div>
 <br>
 <br>
</section>
</div>
<!-- /.row -->

James Hill · Accepted Answer · 2018-02-22T16:00:54.770

Because the hover effects for your images are being handled completely by your CSS, it's not possible to kick off that effect in jQuery/JavaScript. Having said that, if you change the way you approach it just a little, you can reuse most of your code.

To do this, you need to initiate the hover effect with jQuery. The easiest way to do this is to add/remove a CSS class that takes you to your hovered state. Once you've got the desired hover effect being handled by jQuery, simply modify your existing hover() event handler to get the previous div and add/remove your hover state class.

Here's a quick and dirty example to get you started (missing the overlay):

$('.recipeHighlight').hover(
  function() {
    $(this).prev("div").find("img").addClass("hoverExample");
  },
  function() {
    $(this).prev("div").find("img").removeClass("hoverExample");
  }
);

.hoverExample {
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="https://www.cento.com/css/styles.css" rel="stylesheet">
<link href="https://www.cento.com/css/image-effects.css" rel="stylesheet">
<div class="visible-lg visible-md">
  <section id="cento-white-background-half-padding-background" data-speed="4" data-type="background">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <img class="img-responsive recipeContainerImg" src="images/logos/cento_logo.png" width="200px" alt="Cento Fine Foods">
          <h1 class="center">RECIPES FROM OUR KITCHEN</h1>
          <br>
        </div>
      </div>
      <!-- Recipe Row #1 Start -->
      <div class="row rowBackground">
        <div onclick="void(0)" class="col-md-3 col-img">
          <div class="hovereffect">
            <img class="img-responsive" src="https://www.cento.com/images/recipes/appetizers/roasted-pepper-artichoke-tapenade.jpg" alt="Roasted Pepper and Artichoke Tapenade">
            <div class="overlay">
              <a class="info" href="https://www.cento.com/recipes/appetizers/roasted-pepper-artichoke-tapenade.php">View Recipe</a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-img recipeBG recipeHighlight">
          <h1>Roasted Pepper & Artichoke Tapenade</h1>
        </div>
        <div onclick="void(0)" class="col-md-3 col-img">
          <div class="hovereffect">
            <img class="img-responsive" src="https://www.cento.com/images/recipes/appetizers/olive_tapenada.jpg" alt="Olive Tapenade">
            <div class="overlay">
              <a class="info" href="recipes/appetizers/olive_tapenada.php">View Recipe</a>
            </div>
          </div>
        </div>
        <div class="col-md-3 col-img recipeBG recipeHighlight">
          <h1>Olive<br>Tapenade</h1>
        </div>
      </div>
    </div>
    <br>
    <br>
  </section>
</div>
<!-- /.row -->

See Trigger css hover with JS for additional information.

Trying to make a different column highlight when mousing over a div

1 Answers1