Как сдлеать блок(div) ссылкой?

Question

[Bogdan Buchko]

Здравствуйте, столкнулся с такой проблемой, что нужно сделать весь блок ссылкой. Но в блоке есть flex элементы. Если знаете на jQuery также будет отлично.

<div class="projects-list back link3">
                <div class="projects-list-name">
                    <a target="_blank" href="https://github.com/IndiMops/discord-rpc-anime-view">Name</a>
                </div>
                <div class="projects-list-description">Desc</div>
                <div class="projects-list-info">
                    <div class="label">
                        <img class="label-img" oncontextmenu="return false;" src="assets/package.png" alt="package">
                        <div class="label-text">Python</div>
                    </div>
                    <div class="label">
                        <img class="label-img" oncontextmenu="return false;" src="assets/timer.png" alt="Timer">
                        <div class="label-text">17.12.21</div>
                    </div>
                    <div class="label">
                        <img class="label-img" oncontextmenu="return false;" src="assets/status.png" alt="Status">
                        <div class="label-text">Status</div>
                    </div>
                    <div class="label">
                        <img class="label-img release" oncontextmenu="return false;" src="assets/release.png" alt="release">
                        <div class="label-text">v0.0.1</div>
                    </div>
                </div>
            </div>

.projects-list {
    margin: 1rem 0;
}

.back {
    -webkit-transition: all .13s;
    -o-transition: all .13s;
    transition: all .13s;
}

.back:hover{
    background-color: #3b3b3b;
    padding: 1%;
    transform: scale(1.05);
    border-radius: 16px;
}
.projects-list-name {
    font-size: 1.15rem;
}

.projects-list-description, .projects-list-info {
    margin-top: .25rem;
    color: rgb(212, 212, 212);
}

.projects-list-info {
    display: flex;
    flex-wrap: wrap;
    font-weight: 300;
    letter-spacing: .025rem;
}

.label {
    align-items: center;
    display: flex;
    margin-right: .75rem;
}

.label-text {
    margin-left: .45rem;
    font-size: .95rem;
    margin-top: .07rem;
}

.label-img {
    width: 20px;
    height: 20px;
    filter: invert(100%);
}

.release {
    height: 22px !important;
    width: 22px !important;
}

.projects-list-name a:hover {
    color:#1d9bf0;
}

Comments

[Anonymous Penguin]

**не используй jQuery**

[Bogdan Buchko]

Anonymous Penguin, для моего небольшого сайта с пару строк мне хватает.

[Anonymous]

А что не так с тегом <a>?

[Bogdan Buchko]

Никита Савченко, он только текст сделает ссылкой, а мен нужно чтобы все элементы в блоке были ссылкой

[NikitaLikosov]

Bogdan Buchko, наоборот для небольшого сайта лучше не использовать) Вот тебе код на jQuery

$(".projects-list").on("click", () => window.location(myUrl))

Answer 1

[DoNiFF]

<div class="projects-list back link3" onclick="opennewtab('site.com/'>

Comments

[Bogdan Buchko]

Твой не помог, но я нашёл решение по нём.

<div onclick="window.open('https:\/\/somelink.com', '_blank');">
    ...
</div>