Question

<div class="secim" secim="tasarim">
<div class="tasarim-icerik">
<tasarim class="secimler">TASARIM</tasarim>
<img src="img/tasarim.png">
</div>
</div>

<div class="secim" secim="oyun">
<div class="oyun-icerik">
<oyun class="secimler">OYUN</oyun>
<img src="img/oyun.png">
</div>
</div>

<div class="secim" secim="hepsi">
<div class="hepsi-icerik">
<hepsi class="secimler">HEPSİ</hepsi>
<img src="img/hepsi.png">
</div>
</div>

.marginos {
  margin: 100px !important;
}

$(".secim").hover(function() {
    $(this).target = $(function() {
      $(this).has = "div[class$='-icerik']".addClass = "marginos";
    });
  });

实际上我没有收到任何错误，但是代码不起作用。我想这样做：

div.secim->悬停时，
div [class $ =“-icerik”]->将按类别获得一定的利润

Answer 1

您的代码是jQuery，但您标记了javascript。如果您需要纯js，请在下面评论。实际上.hover()具有两个功能，一个在鼠标进入时，另一个在鼠标离开时。 Hover Doc

$( ".secim" ).hover(
  function() {
    $( this ).find("div[class$='-icerik']").addClass("marginos");
  }, function() {
    //if you need margin do not remove on hover out, just comment line below
    $( this ).find("div[class$='-icerik']").removeClass("marginos");
  }
);

Answer 2

比这容易得多。请参见下面的代码：

$(".secim").hover(function() {
    $(this).find("div[class$='-icerik']").addClass('marginos');
});

选中this fiddle。

您并不是说悬停时应该删除边距，如果您需要这样的功能，hover函数采用一个可选参数，即悬停时要执行的回调，可以用来删除marginos类：

$(".secim").hover(function() {
    $(this).find("div[class$='-icerik']").addClass('marginos');
}, function() {
    $(this).find("div[class$='-icerik']").removeClass('marginos');
});

但是，如果您只需要在悬停上添加一些CSS，那么就不需要javascript，如注释中所述：

.secim div[class$=-icerik]:hover {
    margin: 5px !important;
}

选中the fiddle using plain css。

Answer 3

您要向其他div添加边距。

mult

$(".secim" ).hover(
  function() {
    $("div[class$='-icerik']").toggleClass('marginos')
  }
);

.marginos {
  margin: 100px;
}

如果这是您想要的。

Answer 4

您实际上并不需要js；如果您在内部div中添加一个额外的类将获得边距，则仅使用CSS即可实现相同的效果；我还不得不重命名“自定义” html标记以使小提琴正常工作，但无论如何应该有帮助

我使用的标记-稍作修改

<div class="secim" secim="tasarim">
  <div class="icerik tasarim-icerik">
    <div class="secimler">TASARIM</div>
    <img alt="first" src="img/tasarim.png">
  </div>
</div>

<div class="secim" secim="oyun">
  <div class="icerik oyun-icerik">
    <div class="secimler">OYUN</div>
    <img alt="second" src="img/oyun.png">
  </div>
</div>

<div class="secim" secim="hepsi">
  <div class="icerik hepsi-icerik">
    <div class="secimler">HEPSİ</div>
    <img alt="third" src="img/hepsi.png">
  </div>
</div>

还有CSS

.secim {
  display: block;
  position: relative;
  margin: 5px 3px;
}

.secim:hover > .icerik {
  /*margin: 100px !important;*/
  background: #0cc;
}

.secim > .icerik {
  display: block;
  position: relative;
  margin: none;
  background: #ccc;
}

我添加了fiddle，但是我不得不从中排除边距；
发生悬停效果时，100px margin将项目从光标下方推出，从而结束效果（和状态）我添加了背景颜色更改；
为概念证明就足够了

悬停时增加保证金

4 个答案: