Question

我有一个图像，从中间分割，左窗格和右窗格。每一方都有一个独特的链接，它自己的悬停。

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悬停时，我分别失去了右侧或左侧窗格的突出显示。如何在仍悬停并突出显示图像的正确边时向上移动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中添加一个z-index（不需要为1000，1就可以）

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

这应该可以在任何浏览器中正常运行，但是您可以将鼠标悬停在＆＃39;颜色将在你的标题之上，这可能是不可取的。

作为旁注，我感觉你已经过度复杂化，尤其是涉及到你的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/

Answer 2

你可以随时从你的朋友jQuery那里得到一些帮助。如果您在标题上添加监听器以观察悬停，然后在标题悬停时将类hovered切换到#rightPane，则可以保留悬停的样式：

$(".jumbo-title").hover(
    function(){
        $("#rightPane").toggleClass("hovered");
    }
);

CSS：

.jumbo-hover:hover, .hovered {
    background-color: rgba(16, 89, 121, 0.48);
}
.jumbo-hover:hover div p, .hovered div p {
    color: #cbf305;
}

难以在分割图像上悬停

2 个答案: