Question

我有一个标签，如果你将鼠标悬停在它上面，它应该扩展文本内部的长度。我想在它旁边滑动标签的宽度（取决于单词的长度）。这是JS小提琴：http://jsfiddle.net/5s69j/1/

我想使用.length来滑动旁边的div，因为我不想对其进行硬编码。

如果有标签，我最终希望标题div始终可见。如果有标签，那么我希望标题始终位于标签的右侧。如果有ISN标签，那么我在标题之前不需要空格，这就是我不使用保证金的原因。

在这里，我尝试在标签上设置悬停功能，将标题滑动到标签的长度。而且我认为我需要一些东西来计算字符串的长度。如果我遗漏了一些明显的东西，请告诉我。

$(function(){
    var stuff = $(".labels").length;
    $('.labels').hover(function{
      $(".title").slideToggle(stuff, function() {

  });
 });
});

非常感谢你！

Answer 1

JSFiddle - 如果您想要改变任何内容，请与我们联系。你只需要让它们display: inline-block;并删除绝对定位。

Answer 2

DEMO检查一下。

display:inline-block

使用以上方法。它会解决你的问题

Answer 3

检查一下，这里是没有js的解决方案

HTML

<div class="labels">
    <div class="new"></div>
    <div class="firstlabel">label label</div>
</div>
<div class="title">title goes here</div>`

* {
  transition: all .5s ease;
}

.labels {
  float: left;
  overflow: hidden;
  max-width: 20px;
  color: #7cbf50;
  background-color: #7cbf50;
}
.firstlabel {
    white-space: nowrap;+
}

.labels:hover {
  max-width: 500px;
}
.labels:hover .firstlabel {
  color: #fff;
}

或参见以下

http://jsfiddle.net/5s69j/8

我怎么能在另一个div中将一个字符串的.length显示为div

3 个答案: