Question

我有以下网页：Webpage01

如果您将鼠标悬停在顶部的图像上（“豪华公寓......”上方），您会看到一条消息：“请在此处索取宣传册”。下一篇“文章”有一个小幻灯片。我不能让CSS代码在这里工作。我应该把<a class="hovertext" href="contact.html" title="Request a brochure here.">放在哪里？谢谢！

CSS代码：

<style type="text/css">

  a.hovertext {
    position: relative;
    width: 500px;
    text-decoration: none !important;
    text-align: left;
  }
  a.hovertext:after {
    content: attr(title);
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0.5em 5px;
    width: 460px;
    background: rgba(0,0,0,0.8);
    text-decoration: none !important;
    color: #fff;
    opacity: 0;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
  }
  a.hovertext:hover:after, a.hovertext:focus:after {
    opacity: 1.0;
  }

</style>

没有幻灯片显示的文章的HTML，因此可以使用CSS代码：

  <article id="post-9" class="masonry-box post-col-4" itemscope itemtype="http://schema.org/BlogPosting">
    <div class="post-wrap">
      <div class="post-thumb"> <a class="hovertext" href="contact.html" title="Request a brochure here."><img src="images/experience/cropped/_0103_image104.jpg" width="300" height="309" border="0" alt="post-9" class="img-responsive"></a> </div>
      <div class="post-content" itemprop="articleBody">
        <h6 class="post-title">Luxury apartments in Singapore</h6>
        <p>Finished in 2011, Scotts Square consists of two super luxury residential towers of 35 and 43-stories,
          connected by a sky bridge. As one of the tallest residential buildings in the heart of Orchard Road, Scotts Square boasts of 338 ultra luxurious one-, two- and three-bedroom apartments. The sizes range from 624 sq ft for one-bedroom apartments to 1,249 sq ft for 3-bedroom apartments.</p>
        <ul class="list-unstyled meta-inf-item clearfix">
        </ul>
        </ul>
      </div>
    </div>
  </article>

文章的HTML我无法使用悬停CSS功能：

<article id="post-4" class="masonry-box post-col-4" itemscope itemtype="http://schema.org/BlogPosting">
  <div class="post-wrap">
    <script>
                jQuery.noConflict()(function($) {
                  "use strict";
                  $(document).ready(function() {
                    $('#masonry-container').imagesLoaded(function() {
                      $('#flexslider-23').flexslider({
                        animation: "fade",
                        slideshow: true,
                        slideshowSpeed: 4000,
                        smoothHeight: true,
                        controlNav: false,
                        keyboardNav: false,
                        prevText: "",
                        nextText: "",
                        pauseOnHover: false,
                        touch: true,
                        directionNav: false
                      });
                    });
                  });
                });
              </script>
    <div class="post-thumb">
      <div id="flexslider-23" class="flexslider">
        <ul class="slides">
          <li><img src="images/experience/cropped/new_0017_Layer 1.jpg" alt="slide 8"></li>
          <li><img src="images/experience/cropped/new_0018_Layer 1.jpg" alt="slide 1"></li>
        </ul>
      </div>
      <div class="post-thumb-mask"> <i class="fa fa-link post-thumb-mask-icon link-icon"></i> </div>
      <div class="post-content" itemprop="articleBody">
        <h6 class="post-title">South Texas Research Facility</h6>
        <p>The South Texas Research Facility is a more than 1,000-foot-long bar building that bends with Floyd Curl Drive. Rafael Viñoly Architects PC won the project commission by proposing a long horizontal building.</p>
        <ul class="list-unstyled meta-inf-item clearfix">
        </ul>
      </div>
    </div>
  </div>
</article>

CSS代码无法在幻灯片中

0 个答案: