Question

我目前正在使用我的新网站（Rails，SASS），我需要你的CSS帮助。

我有一些关于我的项目的照片。我不想要图片上的文字，只有img：hover =＆gt;必须显示此文本。

我试过这个，但我没有在图片上显示文字。

      <div class="bodyprojet">
      <% @Projets.limit(15).in_groups_of(3, false).each do |group| %>
          <div class="row">
            <% group.each do |projet| %>
                <div class="col-sm-6 col-md-4">
                  <a href="<%= projet_path(projet.slug) %>">
                    <div class="thumbnail">
                      <p class="text">Voir</p>
                      <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>">
                    </div>
                  </a>
                </div>
            <% end %>
          </div>
      <% end %>
  </div>

这是我的CSS（SASS）：

    .bodyprojet {
        padding:0;
        margin: 0;

    .row {
        margin: 0 !important;
        padding: 0 !important;

        .col-md-4.col-sm-6 {
            padding:0px 5px 0px 5px;
            margin: 0;
        }
    }

    a {
        border:none !important;
        text-decoration: none !important;
        color:#000000 !important;
    }

    .thumbnail {
        border:none !important;
        background: #FFED00;
        padding:0 !important;
        position: relative;

        img {
            min-height: 100%;
            display: block;
            min-width: 100%;
            opacity: 1;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;

            &:hover {
            opacity: .2;
            }
        }

        p.text {
            position: absolute;
            left:50%;
            top:50%;
            color:#979797;
            opacity: 0;
            font-size: 30px;
        }

        img:hover p.text {
            color:#000;
            opacity: 1;
        }
    }
}

Answer 1

只需向图片添加工具提示：

 <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>" title="This shows up on mouseover" >

Answer 2

如果您打算在页面的其他位置显示文字，可以使用jQuery：

HTML：

<div class="thumbnail">
  <p class="text">Voir</p>
  <img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>" class="my-image">
</div>

Jquery的：

$(document).on('hover', '.my-image', function() {
  $('.text').text('The text you want to appear');
});

如果您打算将文字显示为图片中的小型弹出式文字：

您只需为图片添加标题即可：

<img src="<%= projet.image.url(:thumb) %>" alt="<% projet.title %>", title="This is the text that will be shown on hover">

当鼠标悬停在图片上时，所有浏览器都会显示标题。

Answer 3

感谢您的帮助，我的问题/问题可能不是很好，但我终于找到了解决方案。

悬停必须只在缩略图上，以避免在尝试点击文本时悬停效果消失..我正在寻找图像上的不透明度：悬停，并在图像上显示文字缩略图：悬停。

CSS：

    .thumbnail {
        border:none !important;
        padding:0 !important;
        position: relative;
        background: #000;
        margin: 5px;

    &:hover {
        img {
            opacity: 0.5;
        }

        span.text {
            visibility: visible;
            opacity: 1;
        }
    }

    img {
        min-height: 100%;
        min-width: 100%;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    span.text {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top:82%;
        left: 30%;
        font-weight: 700;
        font-family:"Source Sans", sans-serif;
        font-size: 18px;
        color:#FFF !important;
        text-transform: uppercase;
         -webkit-transition: .8s ease-in-out;
        transition: .8s ease-in-out;
    }
}

HTML：

    <div class="bodyprojet">
      <% @Projets.limit(15).in_groups_of(3, false).each do |group| %>
          <div class="row">
            <% group.each do |projet| %>
                <div class="col-sm-6 col-md-4">
                  <a href="<%= projet_path(projet.slug) %>">
                   <div class="thumbnail">
                    <img src="<%= projet.image.url(:medium) %>" alt="<% projet.title %>">
                    <span class="text">Voir le projet</span>
                  </div>
                 </a>
                </div>
            <% end %>
          </div>
      <% end %>
    </div>

如何在图像悬停上显示文字？

3 个答案: