0

我在这里做错了什么？我试图通过类获取悬停的 div 的 id，然后添加字符串“-slide”以激活每个 .content 的所谓滑动过渡。

<html>
<head>

<script>
$('.try').hover(function() {
    $(this.id + '-slide').css('right','0px');
});
</script>

<style>
.try {
    width: 50px;
    height: 50px;
    border: 1px black solid;
    margin-bottom: 5px;
 }

.content {
    width: 100px;
    height: 100%;
    background-color: grey;
    position: fixed;
    top: 0;
    right: -50px;
    transition: all 1s ease;
}
</style>

</head>
<body>
<div id="one" class="try"></div>
<div id="two" class="try"></div>
<div id="three" class="try"></div>
<div id="one-slide" class="content"></div>
<div id="two-slide" class="content"></div>
<div id="three-slide" class="content"></div>
</body>
</html>
4

3 回答 3

1

要在 jQuery 中选择特定元素，您需要#id 和.类，就像 css 一样。

你可能需要这个

$("#" + this.id + '-slide').css('right','0px');
于 2013-07-05T09:41:25.607 回答
1

尝试这个：

$(".try").hover(
  function () {
    $('#' + this.id + '-slide').css('right','0px');
  },
  function () {
    $('#' + this.id + '-slide').css('right','-50px');
  }
);

小提琴演示

于 2013-07-05T09:46:50.397 回答
0

不确定 id.id是否会起作用...您尝试过吗？

$('#' + $(this).attr('id') + '-slide').css('right','0px');
于 2013-07-05T09:41:24.507 回答