Кнопки, не нажимаемые внутри div: полагаем, что это происходит из-за фона svg - PullRequest
Новая
       12

Кнопки, не нажимаемые внутри div: полагаем, что это происходит из-за фона svg

0 голосов
/ 19 сентября 2018

У меня есть две кнопки, расположенные в нескольких слоях div.Размещение кнопок за пределами div позволяет им становиться кликабельными, а внутри их нет.После некоторого тестирования кажется, что div 'background' предотвращает нажатие кнопки, возможно из-за использования svg в качестве фона позади кнопок?Я попытался использовать индекс z с позиции: абсолютной без удачиТакже делаем кнопки visibility:visible

    .background {
    background-image: url(images/background.svg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    position: relative;
    top:-76px;
    z-index: -1;

}

    .left-header {
    position: relative;
    top: 40vh;
    
}


    .btn-primary {
    margin-top: 30px;
    text-transform: uppercase; 
    font-family: Roboto;
    font-weight: 500;
    font-size: 15px;
    margin-right: 20px;
    transition: all 0.3s ease 0s;
    outline: none;    
    border-radius: 4px;
    display: inline-block;
    letter-spacing: .025em;
    line-height: 25px;
    cursor: pointer !important;
    

}
<div class="background">
            <div class="container left-header">
                <div class="row">
                    <div class="col">
                            <h1>hello.</h1>
                            <h2>some text</h2>
                            <button type="button" href="#!" class="btn btn-primary shadow"  id="but1">Create Account</button>
                            <button type="button" class="btn btn-primary shadow" id="but2">Contact Us</button>                  
                    </div>
                    <div class="col">
                        <div class="illustration"><img src="images/illustration.svg"></div>        
                    </div>
                </div>              
            </div>      
        </div>

.

1 Ответ

0 голосов
/ 19 сентября 2018

Я предполагаю, что события указателя: ни один на вашем фоне не вызывает проблемы.Не могли бы вы попробовать добавить события указателя: все в класс btn-primary?

...