上点击图像
问题描述：
$(document).ready(function() {
$(".trigger").click(function() {
$(".menu").toggleClass("active");
});
});html, body
{
height: 100%;
overflow: hidden;
}
.absolute-center, .menu, .menu .btn .fa, .menu .btn.trigger .line
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.menu
{
width: 5em;
height: 5em;
}
.menu .btn
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(255, 255, 255,0.5);
opacity: 0;
z-index: -10;
cursor: pointer;
-webkit-transition: opacity 1s, z-index 0.3s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, -webkit-transform 1s;
transition: opacity 2s, z-index 1s, transform 1s;
transition: opacity 2s, z-index 1s, transform 1s, -webkit-transform 1s;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.menu .btn.trigger {
opacity: 1;
z-index: 100;
cursor: pointer;
-webkit-transition: -webkit-transform 0.3s;
transition: -webkit-transform 0.3s;
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
content:url(/home/curiousfool/Downloads/Exxo/images/a.jpg);
}
.menu .btn.trigger:hover
{
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.menu .rotater
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.menu.active .btn-icon
{
opacity: 1;
z-index: 50;
}
.rotater:nth-child(1)
{
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu.active .rotater:nth-child(1) .btn-icon
{
-webkit-transform: translateY(-12em) rotate(45deg);
transform: translateY(-12em) rotate(45deg);
content:url(/home/curiousfool/Downloads/Exxo/images/12.jpg);
align: top;
}
.rotater:nth-child(2)
{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu.active .rotater:nth-child(2) .btn-icon
{
-webkit-transform: translateY(-12em) rotate(-45deg);
transform: translateY(-12em) rotate(-45deg);
content:url(/home/curiousfool/Downloads/Exxo/images/22.jpg);
align: top;
}
.rotater:nth-child(3)
{
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.menu.active .rotater:nth-child(3) .btn-icon
{
-webkit-transform: translateY(-12em) rotate(-135deg);
transform: translateY(-12em) rotate(-135deg);
content:url(/home/curiousfool/Downloads/Exxo/images/sun.jpg);
align: top;
}
.rotater:nth-child(4)
{
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.menu.active .rotater:nth-child(4) .btn-icon
{
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
content:url(/home/curiousfool/Downloads/Exxo/images/heart.jpg);
align: top;
}
.menu.active .rotater:nth-child(4) .btn-icon
{
-webkit-transform: translateY(-12em) rotate(-225deg);
transform: translateY(-12em) rotate(-225deg);
content:url(/home/curiousfool/Downloads/Exxo/images/heart.jpg);
align: top;
}<!DOCTYPE HTML>
<body>
<section id="header">
<div class="inner">
<div class="menu">
<div class="btn trigger">
<span class="line"></span>
</div>
<div class="icons">
<div class="rotater">
<div class="btn btn-icon" title="Send a hug to Mohammed">
<p class="text-box">
Hello
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Send a kiss to Margaret">
<p class="text-box">
This
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family">
<p class="text-box">
Doge
</p>
</div>
</div>
<div class="rotater">
<div class="btn btn-icon " title="Express your love">
<p class="text-box">
Is
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/index.js"></script>
</body>我一直在这个相当长的一段时间，如果你有人可以帮助我这个 所以我创建这个网页添加文本框，其中有是一个图片点击它应该产生一些文本..基本上使用HTML或CSS的文本框 这个图像已经通过CSS添加，而不是HTML img标签，所以这就是为什么我面临一个问题。
编辑：对不起忘了添加代码...所以我希望显示悬停文本框/单击最后一个图像
答
。当你说“最后的形象”，你的意思是对的4顶图像出现在点击？
如果是这样的话，那么你可以使它工作。
与背景图像添加图片：
/* Old version :
content:url(/home/curiousfool/Downloads/Exxo/images/12.jpg); */
background-image:url("path_to_your_image");
background-size:cover;
然后添加.btn-icon里面的一些文字：
<div class="rotater">
<div class="btn btn-icon" title="Wish Good Morning to your Family">
<p class="text-box">
Doge
</p>
</div>
</div>
，并隐藏与其opacity在CSS的文字，只在鼠标悬停显示它：
.text-box{
text-align:center;
z-index:3;
font-size:18px;
font-weight:900;
color:white;
padding-top:30px;
opacity:0;
-webkit-transition: all 0.5s ease; /* Safari */
transition: all 0.5s ease;
}
.text-box:hover{
opacity:1;
}
这是JsFiddle：DEMO
注意：如果你想要的文字，只出现在点击：
/* Replace this part : */
.text-box:hover{
opacity:1;
}
/* With this : */
.showText{
opacity:1;
}
然后：
$(".text-box").click(function(){
$(this).toggleClass("showText");
})
我们能看到你的代码，好吗？ – StardustGogeta
您需要发布最少，完整且可验证的代码，以便我们能够提供帮助。请参阅此链接以获得帮助http://stackoverflow.com/help/mcve – amallard
这可能与您的问题无关。无论如何，这些图像仍然与元素相关联。 – PHPglue