Question

我不熟悉php和wordpress的新手。我有书籍自定义帖子类型，显示所有书籍，基本上我想做什么，例如我的archive-library.php所有书籍帖子都用标题和拇指显示。

我想在悬停拇指时淡入图标。这是我问题的照片这是在开发人员工具中呈现的HTML代码

<div class="lib-style" style="">
    <a href="http://localhost/royayeketab/book/mostafamastoor-2/">
    <img width="1012" height="1181" src="http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="movafaghiyat" srcset="http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat.jpg 1012w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-257x300.jpg 257w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-768x896.jpg 768w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-877x1024.jpg 877w" sizes="(max-width: 1012px) 100vw, 1012px">
    <span class="dis-lib-more">

    </span>
</a>
<p class="text-center">موفقیت پنج</p>
</div>

这是我这部分的代码

<?php $args = array( 'post_type' => 'book'); 
    $loop = new WP_Query( $args ); ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <div class="lib-style" style="">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail(); ?>
                <span class="dis-lib-more">
                </span>
            </a>
            <p class="text-center"><?php the_title(); ?></p>
        </div>
    <?php endwhile; // End of the loop. ?>

CSS样式

.lib-style{
    display: inline-block;
    text-align: center;
    padding: 10px 10px;
    /*margin-bottom: 25px !important;*/

}
.lib-style p{
    margin-top: 10px;
}
.lib-style a{
    display: inline-block;
    background:#000;
}
.lib-style img{
    display: block;

}
.lib-style:hover img{
    opacity: 0.5;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.dis-lib-more{
    display: none;
    width: 50px;
    height: 50px;
    background-image: url('images/mag.png');
}
.lib-style:hover span{
    display: block;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

任何想法都会受到赞赏。

Answer 1

如果我理解正确，您希望var array = ["a","a","a","a","a"]; var i = 1; array.forEach(function(){ array[i-1] += i; i++; }); console.log(array);元素位于缩略图的顶部。如果这是正确的，下面的CSS添加将起作用，只需根据需要调整dis-lib-more和left

bottom

以下是一个例子：

＆＃13;

.lib-style a{
    position:relative;
    /*original CSS....*/
}

.dis-lib-more{
    position:absolute;
    bottom:0;
    left:0;
    /*original CSS....*/
}

＆＃13;

.lib-style {
  display: inline-block;
  text-align: center;
  padding: 10px 10px;
  /*margin-bottom: 25px !important;*/
}
.lib-style p {
  margin-top: 10px;
}
.lib-style a {
  position: relative;
  display: inline-block;
  background: #000;
}
.lib-style img {
  display: block;
}
.lib-style:hover img {
  opacity: 0.5;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}
.dis-lib-more {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 50px;
  height: 50px;
  background-image: url('http://placehold.it/45x150');
}
.lib-style:hover span {
  display: block;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

＆＃13;

如何在拇指上添加图标

1 个答案:

以下是一个例子：