jquery - 难以将鼠标悬停在分割图像上

Question

我有一个图像，它从中间分开，有一个左 Pane 和一个右 Pane 。每一面都有一个独特的链接和它自己的悬停。

HTML

<div class="jumbotron" style="position: relative;">
    <div>
        <div class="jumbo-title">
            <p runat="server">Title</p>
        </div>            
        <a id="leftPane" class="jumbo-hover" runat="server" target="_blank">
            <div>
                <p>Summary</p>
            </div>
        </a>
        <a id="rightPane" class="jumbo-hover" runat="server" target="_blank">
            <div>
                <p>Full Report</p>
            </div>
        </a>
        <img src="/assets/home.jpg" />
    </div>
</div>

CSS

.jumbo-hover {
    height: 100%;
    width: 50%;
    position: absolute;
    top: 0;
}

#MainContent_rightPane {
    right:0;
}

#MainContent_leftPane {
    left: 0;
}

.jumbo-hover:hover {
    background-color: rgba(16, 89, 121, 0.48);
}
.jumbo-hover:hover div p {
    color: #cbf305;
}
.jumbotron p
{
    line-height:1.15em
}
.jumbotron a
{
    text-decoration:none;
}
.jumbo-title
{
    position:absolute;
    color:white;
    width:500px;
    text-align:center;
    font-size:40px;
    font-family:Montserrat, sans-serif;
    text-transform:uppercase;
    z-index:1000;
    margin-top:20%;
    margin-left:30%;
    text-shadow: 1px 4px 5px rgba(150, 150, 150, 1);
    font-weight:bold;            
}
#MainContent_leftPane div 
{
    width:30%; 
    height:20%; 
    margin-top:69%; 
    margin-left:64%; 
    color:white;
    font-family:'Playfair Display';
    font-size:32px;
    text-align:right;
    font-style:italic;
    line-height:0.9em;
}
#MainContent_rightPane div 
{
    width: 30%;
    height: 20%;
    margin-top: 69%;
    margin-left: 6%;
    color:white;
    font-family:'Playfair Display';
    font-size:32px;
    text-align:left;
    font-style:italic;
    line-height:0.9em;    
}

我的问题只是，当我将鼠标悬停在 .jumbo-title 上时，我分别失去了右 Pane 或左 Pane 的突出显示。如何在悬停并突出显示图像的正确一侧的同时向上移动 css 链？

非常感谢!

Answer 1

问题是由于您的标题位于您的 2 个链接之上。我看到了解决此问题的两个选项:

选项 1:将 pointer-events: none 添加到您的标题中

.jumbo-title { pointer-events: none; }

缺点是 IE 支持不佳:http://caniuse.com/#feat=pointer-events
在任何后裔浏览器中它都可以工作:http://jsfiddle.net/hdky0s86/2/

选项 2:将标题移到链接下方

最简单的方法可能是使用 z-index，因为您已经在进行绝对定位。只需从您的 .jumbo-title 中删除 z-index 并将一个添加到您的 .jumbo-hover (不需要它是 1000，1 就可以)

http://jsfiddle.net/hdky0s86/3/

这在任何浏览器中都应该可以正常工作，但是您的“悬停”颜色将位于您的标题之上，这可能是不可取的。

---

附带说明一下，我觉得您把事情搞得太复杂了，尤其是涉及到 HTML 时。看看我设置的示例，它与您使用的一小部分代码基本相同......

<div class='split-image-wrapper'>
    <h1>title</h1>
    <a class='left'>summary</a>
    <a class='right'>full report</a>
</div>

http://jsfiddle.net/hdky0s86/4/