主页 / 问题 / 1502694
Accepted
4efirrr
Asked:2023-03-07 00:28:36 +0000 UTC2023-03-07 00:28:36 +0000 UTC

CSS/JS 全局以外的多链接

  • 772

有新闻卡片，每张卡片里面有一个全局链接到这篇文章，位置为：absolute，这样你就可以点击任何区域进入新闻

但是，除了全局链接之外，还有一些其他链接也应该有效。现在事实证明，全局链接“中断”了它们。需要这样实现，让“Another link”和“And another link”起作用，不通向全局链接，其余卡区已经通向全局链接 .post__global-link

我试图通过绝对的方式以相同的方式实现它们 - 它没有用

为清楚起见，我附上带有样式的 html

.post {
    border: 1px solid transparent;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 16px;
    margin-top: 0;
    color: white;
    height: auto;
    background: #1A1A2B;
    border-radius: 15px;
}

.post__global-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.post .img-box {
    max-width: 31.8181818182%;
    min-width: 40.9090909091%;
    width: 31.8181818182%;
    flex: 1 1 31.8181818182%;
    height: 100%;
}

.post .img-box-overflow {
    width: auto;
    height: auto;
    padding-bottom: 75%;
    display: block;
    position: relative;
    overflow: hidden;
}

.is-scaling {
    border-radius: 10px;
    overflow: hidden;
}

.post .img-box-overflow img.article-block__img {
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: 100%;
}

.post .post__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.post__info-tags ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

a.post__tag-link{
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 10px;
  padding: 10px;
}
<article class="post">
    <a class="post__global-link" href="https://link-to-post.com"></a>
        <div class="img-box">
            <div class="img-box-overflow is-scaling">
                <img class="article-block__img" src="https://assets.entrepreneur.com/content/3x2/2000/20170720143824-image-search-phone.jpeg" alt="some-alt" title="">
            </div>
        </div>
    <div class="post__info">
        <div class="info">
            <div class="category-overlay">
                <span>Категория</span>
            </div>
            <time class="entry-date">
                <span class="date">12.02.2023</span>
            </time>
        </div>
        <h5>Заголовок</h5>
        <span class="preview-text">
            Текст превью
        </span>
        <div class="post__info-tags">
          <ul>
          <li><a class="post__tag-link" href="http://test-link2/" id="link1">Еще ссылка</a></li>
          <li><a class="post__tag-link" href="http://test-link3/" id="link2">И еще ссылка</a></li>
          </ul>
        </div>
    </div>
</article>

html

1 个回答

  1. Best Answer

    需要这样实现，让“Another link”和“And another link”起作用，不通向全局链接，其余卡区已经通向全局链接 .post__global-link

    添加样式链接position: relative;- 现在它们将按预期工作。

    .post {
    border: 1px solid transparent;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    gap: 16px;
    margin-top: 0;
    color: white;
    height: auto;
    background: #1A1A2B;
    border-radius: 15px;
}

.post__global-link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.post .img-box {
    max-width: 31.8181818182%;
    min-width: 40.9090909091%;
    width: 31.8181818182%;
    flex: 1 1 31.8181818182%;
    height: 100%;
}

.post .img-box-overflow {
    width: auto;
    height: auto;
    padding-bottom: 75%;
    display: block;
    position: relative;
    overflow: hidden;
}

.is-scaling {
    border-radius: 10px;
    overflow: hidden;
}

.post .img-box-overflow img.article-block__img {
    -webkit-transition: transform 0.5s;
    transition: transform 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: 100%;
}

.post .post__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.post__info-tags ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px;
    list-style: none;
}

a.post__tag-link{
  text-decoration: none;
  color: white;
  background: gray;
  border-radius: 10px;
  padding: 10px;
  /* добавка */
  position: relative;
  
}
    <article class="post">
    <a class="post__global-link" href="https://link-to-post.com"></a>
        <div class="img-box">
            <div class="img-box-overflow is-scaling">
                <img class="article-block__img" src="https://assets.entrepreneur.com/content/3x2/2000/20170720143824-image-search-phone.jpeg" alt="some-alt" title="">
            </div>
        </div>
    <div class="post__info">
        <div class="info">
            <div class="category-overlay">
                <span>Категория</span>
            </div>
            <time class="entry-date">
                <span class="date">12.02.2023</span>
            </time>
        </div>
        <h5>Заголовок</h5>
        <span class="preview-text">
            Текст превью
        </span>
        <div class="post__info-tags">
          <ul>
          <li><a class="post__tag-link" href="http://test-link2/" id="link1">Еще ссылка</a></li>
          <li><a class="post__tag-link" href="http://test-link3/" id="link2">И еще ссылка</a></li>
          </ul>
        </div>
    </div>
</article>

    • 1

相关问题