Блог

Главная - Вопросы по программированию - Как сделать так, чтобы ссылка применялась только к родительскому элементу вложенного div?

Как сделать так, чтобы ссылка применялась только к родительскому элементу вложенного div?

#html #css

Вопрос:

Я хочу добавить ссылку на кнопку, но не элементы метки.

Я попытался отключить их с помощью класса, но это не работает, если оно не применяется только к тегам (ссылка) (т. Е. отключено), и даже в этом случае оно также отключает ссылку на кнопку.

Я буквально ничего не могу к этому добавить. Это простой вопрос. Я просто не могу получить хорошие ответы в Google.

 @keyframes show-label {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}


body {
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: center;
}

div.button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: auto;
    width: 20vw;
    height: 20vw;
    background-color: lightgray;
    border-radius: 10px;
}

.label {
    opacity: 0%;
}

.label:hover {
    animation: show-label 500ms forwards;
}

div.label {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 10px 10px;
}

p.label {
    color: white;
    font-size: min(1.8vw, 18.17px);
    text-align: center;
} 
 <html>
    <head>
        <link rel="stylesheet"
              href="style.css">
    </head>

    <body>
        <a href="#">
            <div class="button"
                 style="max-width: 157.39px; max-height: 157.39px;">
                <div class="label">
                    <p class"label">the big</p>
                </div>
            </div>
        </a>
    </body>
</html>

Ответ №1:

Вы завернули и кнопку, и ее ярлык в <a> тег, и это совсем не похоже на добавление ссылки на кнопку. Пожалуйста, опишите стиль, который вы хотите более четко. Ссылка не в том стиле.

Если вы хотите link , чтобы он был button только включен, вы можете отключить label его. Я предлагаю эту структуру и стиль для того, что я понял из вашего вопроса, и это меняет вашу структуру:

 @keyframes show-label {
    from {
        opacity: 0%;
    }
    
    to {
        opacity: 100%;
    }
}


body {
    display: flex;
    flex-direction: column;
    flex: auto;
    align-items: center;
}

div.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: auto;
    width: 20vw;
    height: 20vw;
    background-color: lightgray;
    border-radius: 10px;
}

a.button {
    height: 100%;
    transition: 0.5s;
}

a.button:hover {
    background-color: #FFFFFF;
    transition: 0.5s;
}

.label {
    opacity: 0%;
}

.label:hover {
    animation: show-label 500ms forwards;
}

div.label {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px 10px 10px;
}

p.label {
    color: white;
    font-size: min(1.8vw, 18.17px);
    text-align: center;
} 
 <html>
    <head>
        <link rel="stylesheet"
              href="style.css">
    </head>
    
    <body>
        <div class="wrapper" style="max-width: 157.39px; max-height: 157.39px;">
            <a href="#" class="button">
            </a>
            <div class="label">
                <p class="label">the big</p>
            </div>
        </div>
        
    </body>
</html>

ПРИМЕЧАНИЕ: Не стоит жестко кодировать стили в вашей html таблице стилей, когда у вас есть таблица стилей, я оставил style="max-width: 157.39px; max-height: 157.39px; ее такой, какой она была в вашей html , но лучше перенести ее в style.css файл.

Комментарии:

1. Я не могу просто вынуть метку из разделителя, потому что тогда анимация наведения не работает, и мне приходится возиться с позиционированием, чтобы она выглядела так, как будто она находится в div, а не под ним. Это моя проблема. Возможно, это просто невозможно исправить.

2. hover Анимация на label экране такая же, как и была. У вас button не было никакой анимации. Я только что добавил background-color изменение hover , чтобы показать, что это другой элемент. Вы можете установить любую hover анимацию, какую захотите. Я все еще не знаю, хотите ли вы, чтобы они выглядели как один элемент hover или нет. Вам нужно немного лучше объяснить, чего вы хотите.

3. Я просто отредактировал ответ, чтобы он содержал фрагмент кода, чтобы вы могли увидеть результат здесь.

4. Анимации отлично работают в исходном коде, я просто хотел избавиться/отключить ссылки в разделителе меток и абзаце метки, чтобы вы не могли щелкнуть по ним, чтобы перейти к месту назначения ссылки, просто сама кнопка приведет вас туда. Я понимаю, что добавлять сейчас бесполезно, так как метка в любом случае находится отдельно от кнопки, но все равно полезно знать, я думаю, возможно ли это на самом деле.

5. Я понимаю, почему вы думаете, что у меня были проблемы с этим, хотя мне следовало избавиться от анимации наведения, так как на самом деле это не в центре внимания вопроса.

Метки: ,