我有一个按钮,当您将鼠标悬停在按钮上时,我想为其命名。同时,我希望更改背景并在按钮上显示一个列表。
.buttons{ width: auto; position:horizontal; font-size: 0; background-color: darkslategrey; border-radius: 10px; } .buttons .btn-1{ display:inline-block ; border-radius: 8px; background-image: url("/img/teatritood.JPG"); cursor: pointer; background-size: 100%; border: none; padding:none; height: 30rem; width: 33.3%; font-family: 'Courier New', Courier, monospace; color: whitesmoke; font-display: bold; font-size: 30px; box-shadow: inset 80px 80px 80px darkslategrey, inset -80px -80px 80px darkslategrey; } .btn-1:hover{ background-image: url("/img/teatritood.JPG"); cursor: pointer; transition-duration: 0s; background-size: 100%; border: none; padding:none; width: 30.33%; height: 30rem; font-size: 0px; box-shadow: none; box-shadow: inset 10px 10px 10px darkslategrey, inset -10px -10px 10px darkslategrey; } .btn-1:hover::after{ display: block; content: attr(data-hover); font-family: 'Courier New', Courier, monospace; color: whitesmoke; font-display: bold; font-size: 38px; transform: rotateY(180deg); }
<pre>
<section>
<div class="buttons">
<div>
<button type="button" class=btn-1 data-hover="Uus list">Teatritööd</button>
<button type="button" class=btn-2 data-hover="Uus list">Näitused</button>
<button type="button" class=btn-3 data-hover="Uus list">Muud</button>
</div>
</div>
</section>
<div class="hidden-list">
<div>
<ul>
<ul><a>Projektid</a></ul>
<ul>Kirjeldused</ul>
<ul>Pildid</ul>
</ul>
</div>
</div>
</pre>