[英]change div1 on hover over div2 which is under div1
Is it possible to change div1
if div2
is hovered but under div1
? 是否有可能改变
div1
如果div2
盘旋而下div1
?
/* Works */ .div1:hover + .div2 { background-color: red; } /* Doesn't Work */ .div2:hover + .div1, .div2:hover ~ .div1, .div2:hover .div1 { background-color: red; }
<div class="div1">hover</div> <div class="div2">hover</div>
Solutions using Javascript
and/or JQuery
are also appreciated 使用
Javascript
和/或JQuery
解决方案也很受欢迎
Using JQuery
's .hover() + .css() for both the divs 对两个div使用
JQuery
的.hover() + .css()
$( ".div1" ).hover( function() { $(".div2").css( "background-color", "red" ); }, function() { $(".div2").css( "background-color", "initial" ); } ); $( ".div2" ).hover( function() { $(".div1").css( "background-color", "red" ); }, function() { $(".div1").css( "background-color", "initial" ); } );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="div1">hover</div> <div class="div2">hover</div>
Nope, the CSS does not provide a provide a previous sibling selector, the only solution is using JS. 不,CSS没有提供以前的兄弟选择器,唯一的解决方案是使用JS。 You can use jquery's prev() method for the same.
您可以使用jquery的prev()方法。
$(function() { $(".div2").hover(function() { $(this).prev().addClass("hoveredBg"); }, function() { $(this).prev().removeClass("hoveredBg"); }); });
.hoveredBg { background-color: red; }
<div class="div1">div 1 hover</div> <div class="div2">div 2 hover</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
This will only help your hover for the previous sibling div only and not burden the browser for next sibling hover, which can be achieved using CSS only. 这只会帮助您只为之前的兄弟div进行悬停,而不会让浏览器负担下一个兄弟悬停的负担,这可以仅使用CSS实现。
If you don't want to use javascript, you can use display: flex
on the container, then change the rendering order (note that the html order has to be updated as well). 如果您不想使用javascript,可以在容器上使用
display: flex
,然后更改呈现顺序(请注意,html顺序也必须更新)。 Then you can hover on div2
and highlight div1
. 然后你可以将鼠标悬停在
div2
并突出显示div1
。
.container { display: flex; flex-wrap: wrap; } .div1, .div2 { flex: 0 0 100%; } .div1 { order: 1; } .div2 { order: 2; } .div2:hover ~ .div1 { background-color: red; }
<div class="container"> <div class="div2">hover 2</div> <div class="div1">hover 1</div> </div>
Try this below code. 请尝试以下代码。
$(document).ready(function() { $(".div2").mouseover(function() { $(".div1").css("background-color", "red"); }); $(".div2").mouseout(function() { $(".div1").css("background-color", ""); }); });
/* Works */ .div1:hover+.div2 { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <div class="div1">hover</div> <div class="div2">hover</div>
Hope this will help you. 希望这会帮助你。
Check out this fiddle, 看看这个小提琴,
https://jsfiddle.net/rkqhvzyc/ https://jsfiddle.net/rkqhvzyc/
$(document).ready(function() { $(".div2").hover(function(){ $('.div1').css("background-color", "red"); }, function(){ $('.div1').css("background-color", "white"); }); });
/* Works */ .div1:hover + .div2 { background-color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="div1">hover</div> <div class="div2">hover</div>
Interesting how nobody pointed out that classes are multiple on a single page, 有趣的是,没人指出单个页面上的类是多个 ,
and no, you should not target .div1
just like that, like many suggested, and expect that all other .div1
in the DOM will not be targeted as-well. 不,你不应该针对
.div1
就这样,像许多建议,并希望所有其他.div1
在DOM将不会有针对性的孔。
// NONSENSE $( ".div2" ).hover( function() { $(".div1").css( "background-color", "red" ); }, function() { $(".div1").css( "background-color", "initial" ); } );
<div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> <div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To reflect the above-mentioned problem - here's a couple of solutions: 为了反映上述问题 - 这里有几个解决方案:
// 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE) $(".hoverTargetPrev").hover(function() { $(this).prev(".div1").toggleClass("red"); }); // 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() $(".div2").hover(function() { $(this).closest(".couple").find(".div1").toggleClass("red"); }); // 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...) $(".hoverTargetNearestPrev").hover(function() { $(this).prevAll(".div1").eq(0).toggleClass("red"); });
.div2 {color:red;} .red {background: red;}
<h3> 1. EXAMPLE TARGETING .prev() (NOT FLEXIBLE)</h3> <div class="div1">DIV1</div> <div class="div2 hoverTargetPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div class="div2 hoverTargetPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2 hoverTargetPrev">DIV2 hover me (will not work any more)</div> <h3> 2. BETTER EXAMPLE USING .couple PARENT, .closest() AND .find() </h3> <div class="couple"> <div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> </div> <div class="couple"> <div class="div1">DIV1</div> <div class="div2">DIV2 hover me</div> </div> <div class="couple"> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2">DIV2 hover me (will kork!)</div> </div> <h3> 3. EXAMPLE TARGETING .prevAll() and .eq(0) (a bit expensive but...)</h3> <div class="div1">DIV1</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me</div> <div class="div1">DIV1</div> <div>Future intruder...</div> <div class="div2 hoverTargetNearestPrev">DIV2 hover me (will work!!)</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.