How to deactive css hover on empty areas

Question

I have something like this

I try to deactive hover on the red area, I can set the img position to absolute and it happens but I believe its not the right way.

I provided the full code here https://jsfiddle.net/m6ephL81/1/

<nav id='slideShow_control'>
                <a href='#'>
                    <figure><img src='img/slide01_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure>
                </a>
                <a href='#'>
                    <figure><img src='img/slide02_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure>
                </a>
                <a href='#'>
                    <figure><img src='img/slide03_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی توسعه میدان های نفتی</figcaption></figure>
                </a>
                <a href='#'>
                    <figure><img src='img/slide04_thumb.jpg' alt=''><figcaption>توسعه میدان های نفتی</figcaption></figure>
                </a>
            </nav>


#slideShow_control {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

#slideShow_control > a {
  position: relative;
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 20px;
}

#slideShow_control > a:first-child {
    margin-left: 0;
}

#slideShow_control > a:before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background-color: #09779C;
}
#slideShow_control > a:hover:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
  left:0;
  top: -20px;
}

#slideShow_control > a:hover:before {
    transition: all 0.2s ease-in-out;
    background-color: transparent;
    transform: scale(1.7);
    box-shadow: 0 0 0 3px #09779C inset;
}

#slideShow_control figure {
    opacity: 0;
    text-align: center;
    font-size: 0;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    visibility: hidden;
    transition: all 0.3s ease-out;
    z-index: 3;
  pointer-events: none;
}

#slideShow_control figcaption {
    white-space: nowrap;
    padding-top: 8px;
    padding-bottom: 7px;
    color: #fff;
    font-size: 0.9rem;
}

#slideShow_control img {
    transition: all 0.3s ease-out;
}

#slideShow_control a:hover figure {
    opacity: 1;
    visibility: visible;
    bottom: 30px;
    transform: translateX(-50%) translateY(0);
  pointer-events: all;
}

I will appreciate your css or js solutions.

the hover event trigger on the nested elements empty area if you see the code you understand amin jan — zEn feeLo, Sep 18 '16 at 06:07

score 0 · Answer 1 · answered Sep 18 '16 at 06:44

0

The really long text makes the figure element wider than the image. Take a look at this fiddle so you can visualize it. Notice the third figure is huge because I copied and pasted some more text in there.

#slideShow_control figure {
  background-color:red;
  max-width:150px;
}

A quick solution is to make the box only as wide as your images, now you have to figure out how to correctly set the text's position see here.

When using animations like that, using absolute positioned elements inside relative parents is ok. Just try to figure out who you're gonna set the hover on, since the way you implemented it is pretty buggy.

answered Sep 18 '16 at 06:44

serv-bot 22

1,278
2
10
13

thank you, its not the answer Im looking for, If you noticed Ive mentioned I can solve it by seting absolute position on img element but Im sure there is better way – zEn feeLo Sep 19 '16 at 08:30
Ok, how about [this](https://jsfiddle.net/m6ephL81/7/). Just set the `figcaption` as `absolute` and center it with transforms. Since `figcaption` is absolute now, you also have to increment the `bottom` attribute for `#slideShow_control a:hover figure`. I set it to `bottom:60px` and it looks just fine. – serv-bot 22 Sep 19 '16 at 11:47
@CameronA Also, I understand you not wanting to use absolute positioned items because it's not generally recommended, but they're great in some cases, specially when you're using them inside a relatively positioned element that changes position and such. – serv-bot 22 Sep 19 '16 at 11:52

How to deactive css hover on empty areas

1 Answers1