Question

我目前正在制作一个wordpress模板，其中隐藏了帖子的标题，并且在悬停帖子时，它应该显示在浏览器的底部。为了简化，帖子具有以下结构：

<article class="post">
   <header class="article-header">
      <h2 class="entry-title">
         Post Title
      </h2>
   </header>
   <section class="entry-content">
      Post Content
   </section>
</article>

基本上，我希望在身体中有一个固定的，位于浏览器的底部，当一个帖子悬停时，其子元素的内容将被传递到。到目前为止，我的方法是将所有元素不断固定到浏览器底部（隐藏）和悬停，每个元素都将显示。这导致了一些问题，我想我可能更容易有一个空div，它只是抓住标题信息。

任何人都可以帮我解决这个问题，也许是用jQuery或php吗？

谢谢！

Answer 1

你的意思是，这样的事情？ http://jsfiddle.net/rKhqT/5/

HTML：

<article class="post">
   <header class="article-header">
      <h2 class="entry-title">
         Post Title
      </h2>
   </header>
   <section class="entry-content">
      Post Content
   </section>
</article>
<footer></footer>

CSS：

html, body {
    margin: 0;
    height: 100%;
}

.entry-title {
    display: none;
}
footer {
    position: fixed;
    left: 0;
    bottom:0;
    width: 100%;
    height: 30px;
    border: 1px solid black;
}

JS（需要jQuery）：

$(document).ready(function() {
    $('article.post').mouseover(function() {
        $('footer').text($(this).find('h2').text());
    });
    $('article.post').mouseout(function() {
        $('footer').text('');
    });    
});

Wordpress：在悬停时将帖子的标题加载到特定的DIV中

1 个答案: