Hover unrelated divs

By : Rennie Sawade

Date : December 01 2020, 05:00 PM

around this issue I've read related articles how to change on hover some unrelated divs. But could not find what i needed. , Using Jquery it is easy to implement.

code :

$(function(){
    var item = $('.item1');
    var img1 = $('.img1');

    item.mouseover(function() {
        img1.css({"box-shadow": "0px 0px 43px 9px rgba(56,112,255,0.85)"});
    }).mouseout(function() {
        img1.css({"box-shadow": "none"});
    });


    img1.mouseover(function() {
        item.css({"background-color": "rgba(0,141,183,0.9)"});
    }).mouseout(function() {
        item.css({"background-color": "transparent"});
   });
});

Share :

css hover affect unrelated element

By : Rohan Pinto

Date : March 29 2020, 07:55 AM

Hope this helps You don't necessarily have to use

elements. Although, you should avoid nesting tags in tags. I think this is what you might be trying to accomplish (hover over project):
http://jsfiddle.net/u9v0mcvo/1/

CSS hover styles on unrelated elements?

By : Taylor Fitch

Date : March 29 2020, 07:55 AM

I wish this helpful for you I have a UI that looks something like this , This is certainly possible.
There are two steps involved:

code :

.container:hover .area1,.container:hover .area2 {
   background-color: green;
}

.container{
  pointer-events:none;
}
.container .area1,.container .area2{
  pointer-events:all;
}

* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.container {
  pointer-events: none;
}
.container .area1,
.container .area2 {
  pointer-events: all;
}
.container:hover .area1,
.container:hover .area2 {
  background-color: green;
}
.unrelatedcontainer {
  width: 100%;
  height: 100%;
  border: 1px solid red;
}
.area1,
.area2 {
  margin: 3em;
  height: 80%;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

<div class="container">
  <div class="unrelatedcontainer">
    <div class="area1">
      <div class="content">area1</div>
    </div>
  </div>
  <div class="unrelatedcontainer">
    <div class="area2">
      <div class="content">area2</div>
    </div>
  </div>
</div>

How to make inner divs of two unrelated outer divs equal in height?

By : Chiara Arch

Date : March 29 2020, 07:55 AM

this one helps. With jQuery: https://codepen.io/anon/pen/gGVGwj

code :

// Create two arrays for the left element heights and the right element heights
var leftArray = [];
var rightArray = [];

// Get the height of each .line element and save it to the appropriate array
$('#left .line').each(function(i) {
  leftArray.push($(this).height());
});
$('#right .line').each(function(i) {
  rightArray.push($(this).height());
});

// For each element on the left, if its height is smaller than the
// corresponding element on the right, set its height via css to 
// equal the right-side element, and vice versa. Nothing to do if 
// the heights are equal.
for (var i = 0; i < leftArray.length; i++) {
  if (leftArray[i] < rightArray[i]) {
    $('#left .line').eq(i).css('height', rightArray[i])
  } else if (leftArray[i] > rightArray[i]) {
    $('#right .line').eq(i).css('height', leftArray[i])
  }
}

jQuery toggle between unrelated divs on click

By : Rg.

Date : March 29 2020, 07:55 AM

around this issue I'm trying to toggle the slidingDiv in the slides wrapper when the btn is pressed. I'm not sure if I need data-attributes or how I can toggle between slides on click. , update your codes by following

code :

$(function(){
    $('.btn').on("click", function(){
        var $this = $(this);        
        $('.slide').slideUp('fast',function(){
            $(this).filter('[data-btnid="'+$this.data('btnid')+'"]').slideDown();
        });
    });    
});

.btn-wrap {
    display: flex;
}
.btn {
    cursor: pointer
}
.slides {
    border: 2px solid;
}
.slide {
    position: absolute;
    height: 200px;
    width: 200px;
    float: left;
    display: none;
    border: 1px solid;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-wrap">
    <div class="btn" data-btnid="1">Butt1</div>
    <div class="btn" data-btnid="2">Butt2</div>
</div>
<div class="slides">
    <div class="slide" data-btnid="1">For Butt1</div>
    <div class="slide" data-btnid="2">For Butt2</div>
</div>

Owl carousel's .destroy() removes unrelated divs

By : Revanth Kumar

Date : March 29 2020, 07:55 AM

I wish did fix the issue. This is a reported bug: https://github.com/smashingboxes/OwlCarousel2/issues/460
Anyway you could try this to destroy the owl carousel: