Как сделать div интерактивной ссылкой только с HTML5 / CSS3? - PullRequest
Новая
       8

Как сделать div интерактивной ссылкой только с HTML5 / CSS3?

0 голосов
/ 01 марта 2019

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

Я пытаюсь сделать div .content1 полностью кликабельной ссылкой без какого-либо текста или JS-стиля.
У вас есть какие-либо предложения? 

body {
  background-image: url("Images/background-bean.jpg");
  background-size: contain;
}

h1 {
  background-image: url("Images/background-bean.jpg");
}

p {
  background-color: white;
  background-color: rgba(255, 255, 255, .85);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 400px 400px 50px;
  grid-gap: 8px;
  background-image: url(Images/content/background_bean.jpg)
}

.nav {
  grid-column-start: 1;
  grid-column-end: 3;
  color: white;
}

.content1,
.content2,
.content3,
.content4 {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  text-align: center;
}

.social {
  grid-column-start: 1;
  grid-column-end: 2;
  color: white;
}

.footer {
  grid-column-start: 2;
  grid-column-end: 3;
  color: white;
  text-align: right;
}

.content1 {
  background-image: url(Images/content/c1standin.jpg)
}

.content1:hover {
  transform: scale(1.05);
}

.content2 {
  background-image: url(Images/content/c2standin.jpg)
}

.content2:hover {
  transform: scale(1.05);
}

.content3 {
  background-image: url(Images/content/c3standin.jpg)
}

.content3:hover {
  transform: scale(1.05);
}

.content4 {
  background-image: url(Images/content/c4standin.jpg)
}

.content4:hover {
  transform: scale(1.05);
}

.a .content1:feature {
  position: relative;
}

.content1:feature a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-decoration: none;
  /* No underlines on the link */
  z-index: 10;
  /* Places the link above everything else in the div */
  background-color: #FFF;
  /* Fix to make div clickable in IE */
  opacity: 0;
  /* Fix to make div clickable in IE */
  filter: alpha(opacity=1);
  /* Fix to make div clickable in IE */
}
<div class="container">
  <div class="nav"><span class="bold">NAV</span> </div>
  <div class="content1">
    <a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg"></a>
  </div>
  <div class="content2">CONTENT</div>
  <div class="content3">CONTENT</div>
  <div class="content4">CONTENT</div>
  <div class="social">SOCIALMEDIA</div>
  <div class="footer">
    <h6>Image Credit pixabay.com; Elliott Evans 2019</h6>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 01 марта 2019

Как ответил Рохит Шетти , вы можете обернуть свои <div> элементы <a> элементами , а не наоборот.Также см. Сделать весь Div кликабельным .Вот пример: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}
<div class="container">
  <a class="content content1" title="Our Products" href="https://www.example.com">
    <div>OUR PRODUCTS</div>
  </a>
  <a class="content content2">CONTENT</a>
  <a class="content content3">CONTENT</a>
  <a class="content content4">CONTENT</a>
</div>

В качестве альтернативы (но, вероятно, излишне), чтобы ваши <a> элементы заполняли свои родительские элементы <div>, вы можете установить их размер width:100% и height:100%, вот так: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content a {
  display: block;
  width: 100%;
  height: 100%;
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}
<div class="container">
  <div class="content content1">
    <a title="Our Products" href="https://www.example.com">OUR PRODUCTS</a>
  </div>
  <div class="content content2">CONTENT</div>
  <div class="content content3">CONTENT</div>
  <div class="content content4">CONTENT</div>
</div>

Однако, если у вас нет особых причин для дополнительных <div>, я предлагаю удалить их и просто использовать элементы <a> в вашей сетке: 

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 400px 400px;
  grid-gap: 8px;
}

.content {
  background-color: #60330A;
  width: 100%;
  background-position: center;
  background-size: cover;
  text-align: center;
  transition: transform .3s;
}
.content:hover {
  transform: scale(1.05);
}

.content1 {
  background-image: url('https://picsum.photos/200/300?1')
}
.content2 {
  background-image: url('https://picsum.photos/200/300?2')
}
.content3 {
  background-image: url('https://picsum.photos/200/300?3')
}
.content4 {
  background-image: url('https://picsum.photos/200/300?4')
}
<div class="container">
  <a class="content content1" title="Our Products" href="https://www.example.com">OUR PRODUCTS</a>
  <a class="content content2">CONTENT</a>
  <a class="content content3">CONTENT</a>
  <a class="content content4">CONTENT</a>
</div>
0 голосов
/ 01 марта 2019

Вам нужно поместить тег привязки вне div. 

<a title="Our Products" class="content1" id="header-img" href="Images/content/c1standin.jpg">
 <div class="content1"></div>
</a>
...