Single post in Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >
Hello! I've been playing around with css lately and I've made a template with it for my journal. c: I wanted to change the text that has the tooltip to be underlined with a thick white line when I hover over it, so I tried adding
a:hover {
position: relative;
border-bottom: 3px solid white;
}
but it doesn't want to show up. I'm not sure if it's because I changed the dotted line from the tooltip to not be visible when you're not hovering over it or if there's something else that I might have messed up. Any help would be greatly appreciated!
code
[style]
.background{
background:pink;
border: 0.25px solid white;
padding: 3px;
text-align: center;
color: white;
}
.backgroundsmall{
background:white;
border: 0.25px solid white;
padding: 3px;
width: 554px;
height: 20px;
margin: 0 auto;
color: pink;
text-align: center;
font-size:20px;
}
.panel > h3 {
text-align: center;
}
.sbs{display:flex;padding:5px;}
.sbs>.panel{flex:1;margin-right:10px;margin-left:10px;margin-bottom:-10px;}
.panel {
background: pink;
margin: auto;
text-align: center;
box-shadow:none;
border: 0.25px solid white;
border-radius: 0px;
background-color: pink;
&>h3 {
border-bottom: 1.5px solid white;
color: pink;
background-color: white;
border-radius: 0px;
padding: 3px;
&>div {
color: white;
background-color: solid pink;
border: 0.5px solid white;
border-radius: 2px;
padding: 3px;
}
}
}
table{width:100%;border:none;}
tr,td{border:none;padding:3px;text-align:center;font-size:14px;height:10px;}
li{margin-bottom:10px;}
.box {
height: 60px;
width: 80px;
padding: 3px;
border: 0.25px solid white;
border-radius: 0px;
background: pink;
display: inline-block;
text-align: center;
color: white;
font-size: 14px;
}
.fieldbox {
background: pink;
border: 2px solid white;
margin: auto;
padding: 10px;
text-align: center;
width: 275px;
height: 205px;
line-height: 30px;
a:hover {
position: relative;
border-bottom: 3px solid white;
}
span.bbcode_tooltip {
border-bottom: 0px solid white;
}
.tooltip_content {
background-color: pink;
height:205px;
width: 275px;
color: white;
border: 2px solid white;
border-radius: 0px;
left: 4px;
top: 251px;
}}
.sidebox{
background: pink;
color: white;
border: 2px solid white;
margin: auto;
padding: 10px;
text-align: center;
text-decoration: none;
width: 275px;
height: 205px;
line-height: 30px;
}
[/style][font=courier new][
][sc=background]
[center][img]https://piskel-imgstore-b.appspot.com/img/d1454b8a-9758-11ea-8034-f3c324534d8d.gif[/img][/center]
[sc=backgroundsmall][b]POKEMON CATALOG :: WIP[/b][/sc]
This entire thing was just a hot mess
[sc=fieldbox][
][tip=info1][pkmn=shaymin][/tip][
][tip=info2][pkmn=shaymin][/tip][
][tip=info3][pkmn=shaymin][/tip][
][tip=info4][pkmn=shaymin][/tip][
][tip=info5][pkmn=shaymin][/tip][
][tip=info6][pkmn=shaymin][/tip][
][tip=info7][pkmn=shaymin][/tip][
][tip=info8][pkmn=shaymin][/tip][
][tip=info9][pkmn=shaymin][/tip][
][tip=info10][pkmn=shaymin][/tip][
][tip=info11][pkmn=shaymin][/tip][
][tip=info12][pkmn=shaymin][/tip][
][tip=info13][pkmn=shaymin][/tip][
][tip=info14][pkmn=shaymin][/tip][
][tip=info15][pkmn=shaymin][/tip][
][tip=info16][pkmn=shaymin][/tip][
][tip=info17][pkmn=shaymin][/tip][
][tip=info18][pkmn=shaymin][/tip][
][tip=info19][pkmn=shaymin][/tip][
][tip=info20][pkmn=shaymin][/tip][
][tip=info21][pkmn=shaymin][/tip][
][tip=info22][pkmn=shaymin][/tip][
][tip=info23][pkmn=shaymin][/tip][
][tip=info24][pkmn=shaymin][/tip][
][tip=info25][pkmn=shaymin][/tip][
][tip=info26][pkmn=shaymin][/tip][
][tip=info27][pkmn=shaymin][/tip][
][tip=info28][pkmn=shaymin][/tip][
][tip=info29][pkmn=shaymin][/tip][
][tip=info30][pkmn=shaymin][/tip][
][tip=info31][pkmn=shaymin][/tip][
][tip=info32][pkmn=shaymin][/tip][
][tip=info33][pkmn=shaymin][/tip][
][tip=info34][pkmn=shaymin][/tip][
][tip=info35][pkmn=shaymin][/tip][
][tip=info36][pkmn=shaymin][/tip][
][tip=info37][pkmn=shaymin][/tip][
][tip=info38][pkmn=shaymin][/tip][
][tip=info39][pkmn=shaymin][/tip][
][tip=info40][pkmn=shaymin][/tip][
][/sc]
[sc=sidebox]Hover Over Mons For Info[/sc]
[sc=backgroundsmall][/sc]
[center][img]https://piskel-imgstore-b.appspot.com/img/d1454b8a-9758-11ea-8034-f3c324534d8d.gif[/img][/center]
[/sc][/font]