Question

我有一个带有一些伪内容的div。我需要能够链接该内容 - 但无法弄清楚如何。这是标记：

<div class="container join_club">
<div class="text-center">
    <span class="title">
    <h3>Join our new service, click to...</h3>
        </span>
    <div class="col-md-4 col-md-offset-4 take_me_to">
        <div class="arrow_box_join">
            <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
        </div>
    </div>
</div>
</div>

这是CSS：

.span-text {
    text-align: center;
    color: #848484;
    font-size: 15px;
    font-size: 1.5rem; }
        .span-text span {
            display: block;
            line-height: 22px; }

.join_club h3 {
    font-family: Lato;
    font-weight: normal;
    color: #F25E5E;
    font-size: 30px;
    font-size: 3rem;
    border-bottom: 1px solid #F25E5E;
    padding-bottom: 21px;
    margin-bottom: 15px; }

.arrow_box_join {
    width: 100%;
    height: 85px;
    position: relative;
    background: #F25E5E;
    font-family: Lato; }
        .arrow_box_join p {
            font-size: 35px;
            font-size: 3.5rem;
            font-weight: bold;
            margin: 0;
            padding: 0;
            height: 85px;
            line-height: 80px; }
                .arrow_box_join p > a {
                    font-weight: normal;
                    font-size: 30px;
                    font-size: 3rem;
                    line-height: 50px;
                    color: #fff;
                    text-decoration: none;
                    text-transform: uppercase; 
                    }

.arrow_box_join:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #F25E5E;
    border-width: 63px;
    border-top-width: 39px;
    margin-left: -63px; }
.arrow_box_join p:hover, .arrow_box_join p:after {
    background: #8e2e2e;
}

.arrow_box_join:hover:after {
    border-top-color: #8e2e2e;
}
.join_club {
    margin-bottom: 45px; 
 }

这是我用来链接按钮的jQuery（除了底部箭头，不知道该怎么做）。

$('.take_me_to').click(function(){
    window.location.href = $(this).find('a').attr('href')
});

这是Fiddle。我需要能够链接那个底部箭头。感谢

Answer 1

你不能这样做，因为它在javascript或html中不可用，使用另一个确实可以链接的虚拟元素

Answer 2

你不一定能这样做，但你可以试试这个：

将div与点击目标内的箭头嵌套：

<div class="container join_club">
    <div class="text-center">
        <span class="title">
        <h3>Join our new service, click to...</h3>
            </span>
        <div class="take_me_to"> <!-- Nested the arrow div inside -->
            <div class="col-md-4 col-md-offset-4">
                <div class="arrow_box_join"> 
                    <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
                </div>
            </div>
        </div>
    </div>
</div>

然后将一些CSS添加到take_me_to div，使其与箭头重叠：

.take_me_to {
    height:125px;
}

这意味着，当您单击箭头时，因为它嵌套在take_me_to div中，它将显示为链接。

https://jsfiddle.net/syhrq71z/

Answer 3

您在after pseudoelement：

中拥有此样式

pointer-events: none;

删除它，箭头将是可点击的。

＆＃13;

$('.take_me_to').click(function(){
    window.location.href = $(this).find('a').attr('href')
});

＆＃13;

.span-text {
  text-align: center;
  color: #848484;
  font-size: 15px;
  font-size: 1.5rem; }
  .span-text span {
    display: block;
    line-height: 22px; }

.join_club h3 {
  font-family: Lato;
  font-weight: normal;
  color: #F25E5E;
  font-size: 30px;
  font-size: 3rem;
  border-bottom: 1px solid #F25E5E;
  padding-bottom: 21px;
  margin-bottom: 15px; }

.arrow_box_join {
  width: 100%;
  height: 85px;
  position: relative;
  background: #F25E5E;
  font-family: Lato; }
  .arrow_box_join p {
    font-size: 35px;
    font-size: 3.5rem;
    font-weight: bold;
    margin: 0;
    padding: 0;
    height: 85px;
    line-height: 80px; }
    .arrow_box_join p > a {
      font-weight: normal;
      font-size: 30px;
      font-size: 3rem;
      line-height: 50px;
      color: #fff;
      text-decoration: none;
      text-transform: uppercase; }

.arrow_box_join:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #F25E5E;
  border-width: 63px;
  border-top-width: 39px;
  margin-left: -63px; }

.join_club {
  margin-bottom: 45px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container join_club">
	<div class="text-center">
		<span class="title">
		<h3>Join our new service, click to...</h3>
			</span>
        <div class="col-md-4 col-md-offset-4 take_me_to">
            <div class="arrow_box_join">
                <p><a href="/enrollment" title="Click to Join">Join now</a> </p>
            </div>
	    </div>
	</div>
</div>

＆＃13;

链接添加了:: after的内容

3 个答案: