Css when dragging deeply nested classes

[gauravsoni1]

Issue when having deep nesting of CSS (2+ nesting).
The css applied is

.demo-item{
            margin: 10px;
            background-color: green;
            width: 10%;
        }
        .something .demo-item .fruits{
            background-color: yellow;
        }

    <div id="left" class="something">
        <div class="demo-item">
            <span>Item 1</span><br>
            <span class="fruits">Apple</span>
        </div>
        <div class="demo-item">
            <span>Item 2</span><br>
            <span class="fruits">Banana</span>
        </div>
        <div class="demo-item">
            <span>Item 3</span><br>
            <span class="fruits">Grapes</span>
        </div>
    </div>

Issue:
The yellow background color disappears when dragging.

[mostafaebrahimi]

explained here.#583
you can use opacity: 1 !important in div class to override gu-mirror.

[gauravsoni1]

@mostafaebrahimi The issue is not the opacity , since the mirror element is appended to the body the css structure breaks and the yellow background disappears.

[mostafaebrahimi]

@gauravsoni1 Yes you are right.I mean gu-transit not gu-mirror .
When you dragging an element; this class has been added to that element

.gu-transit {
  opacity: 0.2;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

so if you want to not change opacity you can set !important

[denis-sokolov]

I think the mirrorContainer option already solve this for you.