简体   繁体   English

将鼠标悬停在div1下的div2上更改div1

[英]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.

相关问题 在div1上悬停时是否在div2上悬停时,其行为应有所不同 - when hover on div1 depenting on if it is on div2 or not it should act differently jQuery:在div1上的mousenter结束时显示div2 - jQuery: Show a div2 when mousenter over div1 is over Div1涵盖Div2:如何检查鼠标是否覆盖了Div2? - Div1 covers Div2: how to check if the mouse is over the covered Div2? 可拖动div背景在div1以上时为一种颜色,在div2以上时为另一种颜色 - Draggable div background to be one colour when over div1 and then another when over div2 如何移动创建的内容<div1>成一个<div2>不移动整体<div1>并不断创造元素<div1> ?</div1></div1></div2></div1> - How to move the created content of a <div1> into a <div2> without moving the whole <div1> and keep creating elements in <div1>? 如何在将div2悬停并在mouseout上使div1褪色时显示div1? - how to display a div1 on hovering div2 and fading div1 on mouseout? 如何在div或js或jQuery中完全相同的位置用其他div1替换div2 - how to replace div2 with other div1 at exact same position of div1 in js or jquery div1隐藏到div2显示返回div1的时间不刷新页面 - div1 hide to div2 show return to div1 timed without refresh page 将div1的内容放入div2 onclick事件 - put content of div1 into div2 onclick event 计算角度div1和div2之间的距离 - Calculate distance between div1 and div2 in angular
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM