亲爱的朋友,我感谢您抽出宝贵的时间,我将鼠标悬停在y轴上旋转了四个元素。 它们包含在四个div中,它们本身包含在div包装器中。 当我将鼠标悬停在背面图像上时,我想使它可点击,但我不确定该怎么做。 在我看来,将整个div包裹在一个锚标签中并不是一种好方法,甚至可能行不通。 我本来在div内包含一个可点击的图像,但是在我看来,这似乎也不是一个好的形式,尽管我怀疑目前这可能是唯一的方法,我不知道。 你可以在这里看到我的问题,

CSS脚蹼的网站

我将html和CSS的相关部分包括在内,非常感谢您抽出宝贵的时间。

<div id="frontflipwrapper"> 
<div class="frontflip3D"> 
<div id="openings_back" class="back_page_flip"><a href="#"></a></div>
<div id="openings" class="front_page_flip"></div>
</div> 
<div class="frontflip3D"> 
<div id="middle_game_back" class="back_page_flip"></div> 
<div id="middle_game"class="front_page_flip"></div> 
</div> 
<div class="frontflip3D"> 
    <div id="end_game_back" class="back_page_flip"></div> 
    <div id="end_game"class="front_page_flip"></div> 
</div>
<div class="frontflip3D"> 
<div id="strategy_back" class="back_page_flip"></div> 
<div id="strategy"class="front_page_flip"></div> 
</div>
</div> 

/* front page flipper*/

#frontflipwrapper{
margin:10px auto;
width:100%;
height:140px;
}

.frontflip3D{ 
    width:100px; 
    height:100px; 
margin:4.2%;
float:left; 
} 
.frontflip3D > .front_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 0deg ); 
background:#ccc;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D > .back_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 180deg ); 
background:#80bfff;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D:hover > .front_page_flip{ 
transform: perspective( 600px ) rotateY( -180deg ); 
} 

.frontflip3D:hover > .back_page_flip{ 
transform: perspective( 600px ) rotateY( 0deg ); 
} 

#openings{
background-image:url(pawn.png)
}

#middle_game{
background-image:url(knight.png)
}
#end_game{
background-image:url(king.png)
}
#strategy{
background-image:url(rook.png)
}

#openings_back{
background-image:url(img/opening_back.png)

}

#middle_game_back{
background-image:url(img/middle_game_back.png)
}

#end_game_back{
background-image:url(img/endgame_back.png)
}

#strategy_back{
background-image:url(img/strategy_back.png)
}

/* end of front page flipper*/

===============>>#1 票数:0

如果这是问题的一部分,则为idk,但是在<div>开头的div>中没有小于号

  ask by user3528719 translate from so

未解决问题?本站智能推荐:

2回复

如何使图像区域可点击

这不是:“为我做所有工作!” 有点问题。 我只想知道你认为哪种方法适合这一挑战。 我有这张地图: 正如您可以通过蓝色标记看到的那样,我大致绘制了地图的一些选区/区域。 Theese地区我想作为链接。 但是我不太清楚如何把握这个挑战,因为所有的区域都有很奇怪的形状。
2回复

使背景图像可点击以及内容可点击

我想使背景图像及其中的内容都可单击。 我不确定如何实施... 图片: 我希望图像和内容都可以单击。 html部分: CSS部分: 我该如何更改? 需要一些指导...
3回复

Divs使图像上的链接不可点击

我正在尝试在我的网站上的肖像旁边放置Twitter和Facebook图像,但是为了正确定位,我必须使用div。 问题是,当我将div添加到图像和指向它的链接时,div使图像无法被单击并转到链接。 我无法摆脱div,因为这是正确放置图片的唯一方法。 我将在下面发布带有代码的JSfiddle。
2回复

如何在跨度按钮内使图像可点击?

我试图使按钮内的跨度可单击。 跨度内有一个.png图像。 当我单击实际图像时,它仅充当按钮,而当我单击图像本身时,则不充当按钮。 我找不到与我的问题直接相关的任何解决方案。 的HTML 的CSS 编辑: 这是JS函数。 它旨在在单击某个按钮时更改音频/视频文件
2回复

如何使网格中的背景图像可点击?

我的主屏幕上有一个网格的图像,上面有文本。 它位于网格中,行的最小高度要求不高,但没有最大值。 列仅是整个屏幕尺寸的一小部分,因此它们没有设置的宽度。 这是我遇到的问题,如何在不知道大小的情况下使它们可链接? 谢谢! HTML CSS
1回复

使横幅图像的某些区域可点击

我正在建立一个新的网站,主页上是一个带有不同项目(公司提供的产品)的大横幅图片; 您可以查看网站site2.dvsport.com,看看我在说什么。 我真的很想使这些单元格具有链接到页面的产品名称可点击区域。 这可能吗? 万分感谢。
6回复

如何使图像可点击而不是整个div?

这是我正在使用的标记。 我遇到的问题是DIV(整个盒子)正在变成一个超链接。 我只希望图像超链接。 我正在使用的图像更像是圆形中的三角形,所以你有一些盒装div。 文本部分在div中[因为我是一个newb并且从那以后我就这样说了]并且因为这些单词是角度的,例如像44度角一样适合三角
2回复

使图像不可点击/不可拖动

我有一个带有文本和链接的图像,并且我想制作它以便我可以根据需要突出显示文本,而不会冒拖动背景图像的风险。 该网页已具有背景图像,并且该图像是内容的辅助背景。 我尝试将其设置为设置内容的边框的背景,但这似乎是不可能的。 如果可能的话,我想设置图像,使其既不能单击也不能拖动。 我
3回复

使
  • 列出可点击的图像并保持格式
  • 我正在使用<ul>进行树控件。 单击一个项目可展开或折叠节点。 列表图像(项目符号)不可单击,因此解决方案似乎是隐藏它们并仅显示我自己的图像。 这样做的问题是,当一个项目换行到下一行时,列表项目的默认换行缩进行为将丢失。 如何实现CSS所需的功能?
    5回复

    如何使图像的一部分可点击? [重复]

    这个问题在这里已有答案: 如何使图像的一部分成为可点击的链接 3答案 我有一个时钟的图片(我的主页的背景),我想让时钟可点击,所以点击下午1点打开另一页。 我希望每小时都有一个不同的页面。 我可以使用“a tag”来做到这一点吗? 我想要一个html或css代