【发布时间】：2017-03-29 17:52:05
【问题描述】：
我正在开发一个响应式网站，但我发现了一些问题。
我有一个带有图像和一些信息的 Div。当用户悬停这个 div 时，它会改变背景并出现 3 个按钮。
但问题是：如果我使用移动设备并单击按钮位置上的 div（甚至在它出现之前），它正在为按钮调用“OnClick”函数。
我想使用一些功能来让这些按钮只有在它们出现后才能点击。
这是我控制悬停的 JQuery 函数（我使用“this”，因为 div 在列表中重复）
$(this).find(".imovel", this).hover(function(){
$("a.contatos", this).toggle();
$("a.vermais", this).toggle();
$(".local", this).toggle();
$(".valor", this).toggle();
});
所以，我将非常感谢任何帮助。
Here is the div before click Here the div after click
如果我首先点击手机的位置，它会在悬停和按钮出现之前调用它的点击功能，其他按钮也是如此。
谢谢！
正如你所问，我的代码的某些部分（我没有创建这个文件，我的工作是实现一些更改，但其中一个需要处理移动端的点击）
<script type="text/javascript">
$(document).ready(function () {
$(".youtube").colorbox({iframe: true, width: "80%", height: "80%"});
$('.slider_principal').slick({
dots: true,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
arrows: false,
centerMode: true
});
$('.ham_menu').click(function () {
$("#menugeral").toggle();
});
// --------
$(".abrir_ligamos").click(function (e) {
$(".overlaygeral").show();
$(".modal_ligamos").show();
});
$(this).find(".imovel", this).hover(function(){
$("a.contatos", this).toggle();
$("a.vermais", this).toggle();
$(".local", this).toggle();
$(".valor", this).toggle();
});
$(".propostabt").click(function () {
$(".overlaygeral").show();
$(".modal_proposta").show();
$("html, body").animate({ scrollTop: 0 }, "slow");
});
$(".overlaygeral").click(function () {
$(this).hide();
$(".modal_ligamos").hide();
$(".modal_proposta").hide();
});
$(".fechar").click(function () {
$(".overlaygeral").hide();
$(".modal_ligamos").hide();
$(".modal_proposta").hide();
});
var sliders = {
1: {slider: '#slider_imovel', nav: '#slider_imovel_nav'},
};
$.each(sliders, function () {
$(this.slider).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
dots: false,
asNavFor: this.nav
});
$(this.nav).slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: this.slider,
prevArrow: $('.prev'),
nextArrow: $('.next'),
centerMode: false,
focusOnSelect: true,
dots: false,
infinite: true
});
});
});
</script>
<li class="item">
<section class="imovel" onclick="">
<figure>
<div class="imagemProduto" style="background:url('<?= PATH ?>imagens/large/<?= $des_1->arquivo ?>');"></div>
<section class="imask"></section>
<section class="selos">
<?php
if ($des_1->situacao == "e")
echo '<p class="mudar">pronto para mudar</p>';
?>
<?php
if ($des_1->lancamento == "s")
echo '<p class="f360">Lançamento</p>';
?>
<?php
if ($des_1->url_videos != NULL)
echo '<p class="video">Vídeo</p>';
?>
</section>
<?php
$banana = true;
foreach ($favoritos as $favorito) {
if ($favorito == $des_1->id) {
?>
<a ><button id="<?=$des_1->id?>" name="1" class="ifavoriteRED"></button></a>
<?php
$banana = false;
}
}
if ($banana) {
?>
<a ><button id="<?=$des_1->id?>" name="2" class="ifavorite"></button></a>
<?php
}
?>
<section class="informa">
<p class="local">
<span><?= $arr_cidade[$des_1->cidade] ?></span>
<span><?= $bairro[$des_1->bairro] ?></span>
</p>
<p class="valor">
<span>a partir de </span>
<strong><?= number_format( $des_1->valor , 2, ',', '.'); ?></strong>
</p>
<a class="contatos abrir_ligamos" id="ligamos">
<img src="public/images/ligamos.png">
<p>ligamos para você</p>
</a>
<a class="contatos" id="maximizeChat" title="Maximizar" onClick="Tawk_API.maximize();">
<img src="public/images/central.png">
<p>plantão de vendas</p>
</a>
<?php
$string = utf8_encode($des_1->titulo);
$tring = strtolower(strip_tags(preg_replace(array('/[`^~\'"]/', '/([\s]{1,})/', '/[-]{2,}/'), array(null, '-', '-'), iconv('UTF-8', 'ASCII//TRANSLIT', $string))));
?>
<a class="vermais" href="<?= PATH ?>imovel/<?= $des_1->id ?>/<?= $tring ?>">VER MAIS DETALHES</a>
</section>
</figure>
<h1><?= ($des_1->titulo) ?></h1>
<h2><?= $categoria[($des_1->categoria)] ?> / <?= ($des_1->quarto) ?> Quarto(s) / <?= ($des_1->wc) ?> wcs / <?= ($des_1->garagem) ?> vaga(s) / <?= ($des_1->areautil) ?> m² / Cod:<?= ($des_1->id) ?> </h2>
</section>
</li>
【问题讨论】：
-
你能用你的工作代码创建一个小提琴吗？
-
我已经在我的帖子中添加了一些 javascript 和 Html 的部分，你可以看看吗？
标签： javascript html css