CODEWITHSUNDEEP
jqueryhtmlcss
BP85
BP85

Reputation: 3

Difficult hover on split image

I have an image, that is split down the middle, with a left pane and right pane. Each side has a unique link and it's own hover.

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;    
}

My problem is only that when I hover the .jumbo-title, I lose the highlighting of the right or left pane respectively. How can I move up the css chain while still hovering and highlighting the proper side of the image?

Thanks so much!

Upvotes: 0

Views: 290

Answers (2)

Josh KG
Josh KG

Reputation: 5140

You can always get a little help from your friend jQuery. If you add a listener on your title to watch for hovers, and then toggle a class hovered to your #rightPane when title is hovered, you can keep the hovered styles on:

$(".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;
}

Upvotes: 0

Pevara
Pevara

Reputation: 14310

The problem is caused by the fact that your title is laying on top of your 2 links. I see two options to solve this:

option 1: add pointer-events: none to you title

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

disadvantage of this is the poor support in IE: http://caniuse.com/#feat=pointer-events
in any descent browser it will work though: http://jsfiddle.net/hdky0s86/2/

option 2: move your title underneath your links

the most easy way for this is probably to work with the z-index, since you are already positioning absolute. just remove the z-index from your .jumbo-title and add one to your .jumbo-hover (and no need for it to be 1000, 1 will do)

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

This should work fine in any browser, but your 'hover' color will be on top of your title, which is probably not desirable.

As a side note, I have the feeling you are over complicating things, especially when it comes to your HTML. Have a look at the example I set up, that does basically the same with a fraction of the code you use... 

<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/

Upvotes: 1

Related Questions