javascript - 将鼠标悬停在 div 上时尝试突出显示不同的列

Question

我正在为我的主页创建一个食谱显示。当您将鼠标悬停在烤胡椒和朝鲜蓟橄榄酱盒上时，我希望它左侧的图像触发其鼠标悬停事件。我也想反过来。因此，如果您将鼠标悬停在烤胡椒盒左侧的图像上，右侧的文本应该会触发其鼠标悬停事件。 此外，食谱框仅在屏幕尺寸大于 768 像素时显示。我在移动设备上隐藏了它。希望有人能帮忙。我一直在尝试许多不同的技术，但都没有成功。我不确定如何正确执行此操作。谢谢!

$('.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 -->

Answer 1

因为图像的悬停效果完全由 CSS 处理，所以不可能在 jQuery/JavaScript 中启动该效果。话虽如此，如果您稍微改变处理方法的方式，就可以重用大部分代码。

为此，您需要使用 jQuery 启动悬停效果。最简单的方法是添加/删除将您带到悬停状态的 CSS 类。获得由 jQuery 处理的所需悬停效果后，只需修改现有的 hover() 事件处理程序即可获取先前的 div 并添加/删除悬停状态类。

这是一个快速入门的示例(缺少叠加层):

$('.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 -->

参见 Trigger css hover with JS了解更多信息。