Question

我正在为我的主页创建食谱展示。当你将鼠标悬停在烤胡椒和朝鲜蓟橄榄酱盒子上时，我想要它左边的图像来触发鼠标悬停事件。我也想反过来。因此，如果将鼠标悬停在烤胡椒盒左侧的图像上，右侧的文本应触发其鼠标悬停事件。 此外，配方框仅显示屏幕尺寸是否大于768px。我将其隐藏在手机上。希望有人可以提供帮助。我一直在尝试许多不同的技术而没有成功。我不确定如何正确地做到这一点。谢谢！

＆＃13;

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

＆＃13;

<!-- 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 -->

＆＃13;

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。

当鼠标悬停在div上时，尝试使不同的列突出显示

1 个答案: