Question

我有两个div，一个是大红色，一个是小蓝色，一个是红色，另一个是红色。

当盘旋时，它们通过将不透明度改为1来显示。我将红色的一个放在顶部而蓝色放在顶部。

当我悬停红色时，它会完全显示。当我将蓝色的那个悬停时，我必须将鼠标悬停在红色外面的部分上以完全显示它。

我想要的是，当我将鼠标悬停在红色部分之外的蓝色部分时，仅显示此部分，而不显示红色部分内部（下方）的部分。我怎么能这样做？

$(".blue, .red").on({

    mouseenter: function () {
        $('.squares > div').css('opacity', '0');
        $(this).css('opacity', '1');
    },
    mouseleave: function () {
        $(this).css('opacity', '0');
    }
});

.red {
    background-color:red;
    width:200px;
    height:200px;
    position:absolute;
    opacity:0;
     z-index:2;
}
.blue {
    background-color:blue;
    width:100px;
    height:100px;
    position:absolute;
   
    top:150px;
    left:50px;
    opacity:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squares">
    <div class="blue"></div>
    <div class="red"></div>
</div>

它应该如下所示：http://s14.postimg.org/rqzujr9xt/Untitled.png请注意，我不能分割蓝色部分，也不能只在外部使用较小的部分。蓝色部分的一部分必须在红色部分之下。我不知道会有多大。

Answer 1

你想要这个吗？ https://jsfiddle.net/0qfxw8z8/38/
我通过将color的{{1}}更改为red div（与white的bg颜色相同）来创建幻觉

更新：修复了一个小错误，现在parent div消失在red div上，通过查看mouseleave我添加到border来确认1}}
https://jsfiddle.net/0qfxw8z8/45/

Answer 2

https://jsfiddle.net/0qfxw8z8/37/

<强> HTML ：

<div class="squares">
    <div class="blue">
        <div class="upper">&nbsp;
        </div>
        <div class="lower">&nbsp;
        </div>
    </div>
    <div class="red">
    </div>
</div>

<强> CSS ：

.red {
    background-color:red;
    width:200px;
    height:200px;
    position:absolute;
    opacity:0.1;
}
.blue {
    background-color:transparent;
    width:100px;
    height:100px;
    position:absolute;  
    top:158px;
    left:50px;
}

.blue > .upper, .blue > .lower { 
    opacity: 0.1;
    height: 50px;
    background-color: blue;
}

.blue > .lower:hover, .red:hover {
    opacity: 1;
}

这就是你要求的：

当你的红色div：显示整个红色div
当你HOVER BLUE div：只显示底部（未覆盖）部分

Answer 3

<强> JSFiddle (Updated 4.0)

number

<div class="js-main-container">
    <div class="js-show-content"></div>
    <div class="js-hidden-container">Content</div>
</div>

.js-main-container {
    background-color:red;
    width:200px;
    height:200px;
    position:absolute;
    z-index:2;
}
.js-show-content {
    background-color: black;
    width:100px;
    height:100px;
    position:absolute;

    top:150px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity:0.1;
    z-index: 3;
}

.js-hidden-container {
    color: #fff;
    display: none;
    background-color:blue;
    width:100px;
    position:absolute;

    top:100%;
    left:0;
    right: 0;
    margin: 0 auto;
}

JSFiddle (Updated 3.0)

Answer 4

尝试这个

$(".blue, .red").on({

    mouseenter: function() {

        if ($(this).attr('class') == 'red') {

            $('.squares .red').css('background-color', 'red');
            $('.squares > div').css('opacity', '0');
            $(this).css('opacity', '1');

        } else if ($(this).attr('class') == 'blue') {

            $('.squares .red').css('opacity', '1');
            $('.squares .red').css('background-color', 'white');
            $(this).css('opacity', '1');

        }


    },
    mouseleave: function() {
        $(this).css('opacity', '0');
    }
});

这是fiddle

Answer 5

试试这个，

<强> Demo

我只是添加了z-index:-1的{{1}}和.blue background-color:"white"。

Answer 6

您应该在代码中包含第三个块。并像其他部分一样制作动画。 JSfiddle here

$(".blue, .red").on({
    mouseenter: function () {
        $('.squares > div').css('opacity', '0');
        $(this).css('opacity', '1');
    },
    mouseleave: function () {
        $(this).css('opacity', '0');
    }
});

$(".blue-on-red, .red").on({
    mouseenter: function () {
        $('.squares > div').css('opacity', '0');
        $(this).css('opacity', '1');
    },
    mouseleave: function () {
        $(this).css('opacity', '0');
    }
});

.red {
    background-color:red;
    width:500px;
    height:500px;
    position:absolute;
    z-index:1;
    opacity: 0;
}

.blue-on-red {
    background-color:blue;
    width:300px;
    height:300px;
    position:absolute;
    top:250px;
    z-index: 2;
    left:100px;
    opacity: 0;
}

.blue {
    background-color:blue;
    width:300px;
    height:40px;
    position:absolute;
    top:505px;
    z-index: 3;
    left:100px;
    opacity: 0;
}

<div class="squares">
    <div class="blue"></div>
    <div class="blue-on-red"></div>
    <div class="red"></div>
</div>

Answer 7

＆＃13;

$(".blue, .red").on({

    mouseenter: function () {
        $('.squares > div').css('opacity', '0');
        $(this).css('opacity', '1');
    },
    mouseleave: function () {
        $(this).css('opacity', '0');
    }
});

＆＃13;

.red {
    background-color:red;
    width:500px;
    height:500px;
    position:absolute;
    
     z-index:2;
}
.blue {
    background-color:blue;
    width:300px;
    height:300px;
    position:absolute;
   
    top:250px;
    left:100px;
   
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="squares">
    <div class="blue"></div>
    <div class="red"></div>
</div>

＆＃13;

正如你在这里看到的那样，当你悬停这个部分时，蓝色部分从红色Squere下来并且它正在工作。

Answer 8

当我理解你的问题时，这是一个工作解决方案的更新小提琴。 https://jsfiddle.net/0qfxw8z8/1/

你的问题在于使用'this'，它只能动画鼠标输入的div的不透明度。但实际上你想要动画所有div的不透明度。

更新了JS

$(".red").on({

    mouseenter: function () {
        //$('.squares > div').css('opacity', '0');
        $('.square').css('opacity', '1');
    },
    mouseleave: function () {
        $('.square').css('opacity', '0');
    }
});

更新了HTML

 <div class="squares">
    <div class="square blue"></div>
    <div class="square red"></div>
</div>

显示基础div部分

8 个答案: