img和li

Question

我正在为我的照片使用lightslider，我想在将鼠标悬停在照片上时显示工具提示。 img的元素位于左上方，下方列表中的元素位于左下角。这可以仅使用css或其他东西来完成吗？

http://jsfiddle.net/hooly/5y98h2ec/

$('#lightSlider').lightSlider({
  gallery: true,
  item: 1,
  loop: true,
  slideMargin: 0,
  thumbItem: 9
});

.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>

<div class="demo">
  <ul id="lightSlider">
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" alt="">
    </li>
    <li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
      <img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" alt="">
    </li>
  </ul>
</div>

Answer 1

截至2017年1月16日，对于图书馆＆＃34; lightslider＆＃34;您使用的是data-toggle="tooltip" doesn't work。所以你将不得不使用其他东西。

你仍然可以通过添加title =＆＃34;你的工具提示＆＃34;来获得主要图像（显示为大图，而不是缩略图）的基本工具提示。每个人。

<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
  <img title="hi" src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" alt="">
</li>

Answer 2

是的，可以用css完成：

＆＃13;

＆＃13;

ShowCategory

＆＃13;

$('#lightSlider').lightSlider({
  gallery: true,
  item: 1,
  loop: true,
  slideMargin: 0,
  thumbItem: 9
});

＆＃13;

.demo {
  width: 420px;
}

ul {
  list-style: none outside none;
  padding-left: 0;
  margin-bottom: 0;
}

li {
  display: block;
  float: left;
  margin-right: 6px;
  cursor: pointer;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

＆＃13;

＆＃13;

＆＃13;