代码之家  ›  专栏  ›  技术社区  ›  Dolorosa

创建悬停jquery上的运行文本

css html jquery
  •  3
  • Dolorosa  · 技术社区  · 6 年前

    我创建了一些短卡片,如下所示。

    我正在尝试这样做,当我悬停文本时,文本向左滚动直到 overflow: hidden 可以看到文本。到目前为止,我已经尝试过了,但是我的文本似乎滚动到了卡片填充区之外,我希望它在填充区内被裁剪。

    感谢您的帮助!:) 

    $(document).ready(function(){
  var interval_val = 2;
  var timeout_ =null;
  $(".title").on("mouseover", function(){
    var this_ =this;
    timeout_ = setInterval(function(){
      $(this_).scrollLeft(interval_val);
      interval_val++;
    }, 100);
  });
  
  $(".title").on("mouseout", function(){
    
      clearInterval(timeout_);
      $(this).scrollLeft(0);
  });
  
})

$(".card").click(function() {
  if ($(this).val() == 0) {
    $(this).addClass("clicked");
    $(this).val(1);
  }
  else {
    $(this).removeClass("clicked");
    $(this).val(0);
  }
});

$(".action").click(function() {
  var thisCard = $(this).parent().parent();
  thisCard.addClass("edit");
  thisCard.find(".title").css({"display": "none"});
  thisCard.find(".action").css({"display": "none"});
  thisCard.find(".action-edit").css({"display": "inline-block"});
  thisCard.find(".input-group").css({"display": "inline-block"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".input-main").val(thisCard.find(".title").text());
  }
  else {
    thisCard.find(".input-main").val(thisCard.find(".title-main").text());
    thisCard.find(".input-sub").val(thisCard.find(".title-sub").text());
  }
  thisCard.find(".input-main").focus();
  thisCard.removeClass("clicked");
});

$(".check").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({"display": "inline-block"});
  thisCard.find(".action").css({"display": "inline-block"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  if (thisCard.find(".input-sub-line").length == 0) {
    thisCard.find(".title").text(thisCard.find(".input-main").val());
  }
  else {
    thisCard.find(".title-main").text(thisCard.find(".input-main").val());
    thisCard.find(".title-sub").text(thisCard.find(".input-sub").val());
  }
  thisCard.removeClass("clicked");
});

$(".cancel").click(function() {
  var thisCard = $(this).parent().parent().parent();
  thisCard.removeClass("edit");
  thisCard.find(".title").css({"display": "inline-block"});
  thisCard.find(".action").css({"display": "inline-block"});
  thisCard.find(".action-edit").css({"display": "none"});
  thisCard.find(".input-group").css({"display": "none"});
  thisCard.removeClass("clicked");
});
    .card-wrapper {
  width: calc(100% - 48px);
  height: 100%;
  border-left: dashed 1px #ccc;
  border-right: dashed 1px #ccc;
  padding: 48px 16px 0;
  background-color: #fff;
}

.card-row {
  width: 100%;
}

.card-cell {
  display: inline-block;
  width: calc(100% / 6 - 20px);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 16px;
  vertical-align: top;
}

.card {
  width: 100%;
  height: 72px;
  border-radius: 3px;
  background-color: #F8f8f8;
  box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
  font-size: 16px;
  cursor: pointer;
  border: solid 1px transparent;
}

.big-card {
  height: 96px;
}

.card .content {
  display: block;
  width: 100%;
}

.card .content .title,
.card .content .input {
  padding: 24px 0 24px 24px;
  font-size: 16px;
  color: #333;
  display: inline-block;
  width: calc(100% - 80px);
}

.card .content .title {
  white-space: nowrap;
  overflow: hidden;
}

.card .content .input {
  display: none;
}

.input-main,
.input-sub {
  border: none;
  font-size: 13px;
  border-bottom: solid 1px #c4c4c4;
  width: 100%;
}

input:focus {
  outline-style:none;
  box-shadow:none;
  border-bottom: solid 1px #c4c4c4;
}

.card .content .action {
  width: 24px;
  padding: 24px 20px 24px 12px;
  text-align: right;
  display: inline-block;
  vertical-align: top;
  float: right;
}

.card .content .action-edit {
  display: none;
  width: 36px;
  padding: 0;
  border-left: solid 1px #c4c4c4;
  vertical-align: top; 
  float: right;
  text-align: right;
}

.check,
.cancel {
  height: 35.5px;
  text-align: center;
}

.action-edit > .check i,
.action-edit >.cancel i {
  line-height: 35px;
  font-size: 13px;
}

.cancel i {
  color: #aaa;
}

.check i {
  color: #00c983; 
}

.check-tall,
.cancel-tall {
  height: 48px;
}

.check-tall i,
.cancel-tall i {
  line-height: 46px !important;
}

.cancel {
  border-bottom: solid 1px #c4c4c4; 
}

.card .content .action i {
  font-size: 13px; 
  color: #aaa;
}

.card .content .action i:hover {
  color: #00c983; 
}

.card .content .action-edit .cancel i.fa-times:hover {
  color: #FF7979;
}

.clicked {
  background-color: #CAF1FF;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.edit {
  background-color: #fff;
  border: solid 1px #00c983;
  box-shadow: 0px 0px 32px 0 rgba(0,153,255,0.3);
}

.subtitle {
  font-size: 12px; 
  margin-top: 4px;
}

.subtitle-label {
  color: #999; 
}

.input-sub {
  font-size: 12px;
}

.input-sub-line {
  display: block; 
  width: 100%;
  transform: translateX(2px);
  margin-top: 8px;
}

.input-sub-label {
  display: inline-block; 
  width: 32px;
  font-size: 12px;
  color: #999;
}

.input-sub {
  display: inline-block; 
  width: calc(100% - 40px);
  vertical-align: top;
  float: right;
}

.input-group {
  display: none; 
  padding: 22px 24px;
  width: calc(100% - 88px);
}

.populate-card {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .card-cell {
    width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 767px) and (min-width: 576px) {
  .card-cell {
    width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 575px) {
  .card-cell {
    width: 100%;
    padding-left: 0;
  }
}
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">

<div class="card-wrapper">
  <ul class="card-row">
    <li class="card-cell">
      <div class="card card-first" value=0>
        <div class="content">
          <div class="title"><span>Administration</span></div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Agriculture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Architecture</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Arts and Design</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card" value=0>
        <div class="content">
          <div class="title">Civil</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card card-last" value=0>
        <div class="content">
          <div class="title">Computer</div>
          <div class="input-group"><input type="text" class="input-main"></div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
          <div class="action-edit">
            <div class="cancel"><i class="fas fa-times"></i></div>
            <div class="check"><i class="fas fa-check"></i></div>
          </div>
        </div>
      </div>
    </li>
  </ul>
  <div class="caption">1-Attribute Card</div>

  <ul class="card-row">
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
    <li class="card-cell">
      <div class="card big-card" value=0>
        <div class="content">
          <div class="title"><span class="title-main">Bank Central Asia</span><br><span class="subtitle"><span class="subtitle-label">Code </span><span class="title-sub">014</span></span></div>
          <div class="input-group">
            <input type="text" class="input-main">
            <div class="input-sub-line">
              <div class="input-sub-label">Code</div> 
              <input class="input-sub" type="text"></div>
            </div>
          <div class="action"><i class="fas fa-pencil-alt"></i></div>
            <div class="action-edit">
              <div class="cancel cancel-tall"><i class="fas fa-times"></i></div>
            <div class="check check-tall"><i class="fas fa-check"></i></div>
          </div>
          </div>
      </div>
    </li>
  </ul>
<div class="caption">2-Attributes Card</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    2 回复  |  直到 6 年前
        1
  •  1
  •   Varlain Systems    6 年前

    在您的CSS中,在.title类上: 不要设置填充,只需使用具有相同24px间距的边距。 

    .card .content .title {
    white-space: nowrap;
    overflow: hidden;
    margin: 24px 0 24px 24px;
    padding:0px;
}
        2
  •  1
  •   IP_    6 年前

    尝试添加 padding-left 到 .content 和编辑 .title 衬垫: 

    .card .content {
    padding-left: 24px;
    box-sizing: border-box;
}
.card .content .title {
    padding: 24px 0;
    font-size: 16px;
    color: #333;
    display: inline-block;
    width: calc(100% - 80px);

    }

    推荐文章
    Yunusović  ·  我无法用css更改html段落颜色
    1 年前
    Blake  ·  无法使用CSS旋转Angular 15中的字体图标
    1 年前
    Maarten -Monica for president  ·  将图像放在锚点标记内时调整网格中的图像大小
    1 年前
    Phil Lucks  ·  如何制作边界的外半径?
    1 年前
    roy_meir  ·  创建自定义下拉式元素
    1 年前
    Community wiki  ·  如何为触摸设备优化网站
    1 年前
    Paras Chandravanshi  ·  为什么<ul>没有从其父<p>元素继承?
    1 年前
    tpetzoldt  ·  如何在有光泽的情况下抑制图像的抗锯齿?
    1 年前
    boyenec  ·  反应如何将css样式应用于我从api respose获得的页面的spcifc部分
    1 年前
    manofconstsorrow  ·  点击导航项目关闭汉堡菜单
    1 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号