Question

对于我的网站，我终于创建了一个加载更多选项，其中包含一个可点击的图片，点击后会加载下一个帖子。但是，我想在图像上添加一个效果，这样当一个人在“＆＃34; plus＆＃34;旋转。由于链接区域位于图像上方，因此＆＃34;加上＆＃34;不再旋转。

关于如何在不破坏插件的情况下解决此问题的任何想法，在wordpress中加载更多功能？

＆＃13;

a.load_more { border-radius: 70%; height:26%; width:15%; position: absolute; top:3%; left:1.5%; display:block; background:rgba(0,255,0,0.5);}

img.plus{
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    z-index:999
}

img.plus:hover{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

＆＃13;

    <div id="content">
        <div id="block">     
            <div>
                <img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
                <a href="#" class="load_more"></a>
            </div>
            </div>
    </div><!--/content-->

＆＃13;

fiddle

Answer 1

你可以把链接放在图像周围，这样图像就是你甚至不需要href类的链接。

示例：

 <div id="content">
        <div id="block">     
            <div>
               <a href="#" class="load_more">
                <img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/>
               </a>
            </div>
            </div>
    </div><!--/content-->

我希望我理解你的问题是正确的，这对你有帮助。

Answer 2

尝试添加＆＃34; visibility：hidden＆＃34;

.load_more { 
  border-radius: 70%; 
  height:29%; 
  width:11%; 
  position: absolute; 
  top:3%; left:1.2%; 
  display:block; 
  background:rgba(0,255,0,0.5);
  visibility: hidden;
}

Answer 3

只需将您的标记更改为这样。通过锚点包裹图像。

img.plus{
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
    z-index:999
}

img.plus:hover{
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}

<div id="content">
        <div id="block">     
            <div>
                <a href="#" class="load_more"><img class="plus" src="http://www.hellodolly.be/wp-content/uploads/2016/10/plus.png"/></a>
            </div>
            </div>
    </div><!--/content-->

希望它有所帮助。干杯

css对悬停的影响，对带有图像的achor标签

3 个答案: