【发布时间】：2018-09-20 03:41:53
【问题描述】：
请我尝试单击 div（标记）而不单击链接。我已将链接设置为 jquery cdn，但是当我单击它时，我只希望 div（外部）显示以显示块而不转到链接。我的代码如下。当我点击右下角的圆圈时。它将在父 div 的中心显示一个大标记。但随后它会转到我不想要的链接。
$(".news-box").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
$(".news-box").mouseenter(function() {
$(".circle").css("display", "block");
}).mouseleave(function() {
$(".circle").css("display", "none");
});
$(".circle").on("click", function() {
$(".outer").css("display", "block");
});img {
width: 100px;
height: 94px;
text-align: center;
vertical-align: top;
position: relative;
top: 7px;
left: 10px;
}
.news-box {
width: 350px;
height: 100px;
border: 3px solid red;
position: relative;
}
.img-box {
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
}
.news-descript {
margin-top: 15px;
}
a {
position: absolute;
top: 0;
left: 0;
z-index: 1;
bottom: 0;
right: 0;
cursor: pointer;
}
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
.circle {
width: 22px;
height: 22px;
background-color: rgba(13, 16, 18, 0.5);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 1s linear;
position: absolute;
bottom: 0;
right: 0;
z-index: 4;
display: none;
}
.circle:hover {
background-color: rgba(13, 16, 18, 1.0);
}
.mark {
border-right: 3px solid white;
border-bottom: 3px solid white;
transform: rotate(45deg);
background-color: transparent;
width: 7px;
height: 15px;
position: relative;
left: 6px;
top: 2px;
}
.black {
width: 350px;
height: 100px;
background: rgba(0, 0, 0, 0.5);
}
.big-mark {
border-right: 5px solid white;
border-bottom: 5px solid white;
transform: rotate(45deg);
width: 30px;
height: 90px;
margin: auto;
}
.outer {
top: -3px;
right: -3px;
position: absolute;
z-index: 3;
display: none;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-box">
<a href="https://code.jquery.com/"></a>
<div class="circle">
<div class="mark"></div>
</div>
<div class="outer">
<div class="black">
<div class="big-mark">
</div>
</div>
</div>
<div class="inside">
<div class="row">
<div class="col-xs-4 position one">
<div class="img-box">
<img src="https://preview.ibb.co/gJaSjx/timi_small.jpg">
</div>
</div>
<div class="col-xs-8">
<div class="news-descript">
<p>Pellentesque in ipsum id orci porta dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
标签： javascript jquery html css