По сути, когда я наводю курсор на «Metasploit Suite» или «Другие инструменты эксплуатации», появляется «обертка». -cont" div выглядит так, как и ожидалось, однако, похоже, он выполняет какое-то странное смешивание/сдвиг непрозрачности/наложение с div .section-wrapper загрузки/загрузки
Вот мой HTML для соответствующего раздела :
Код: Выделить всё
body {
background: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0,.85));
margin: 10px;
position: relative;
background-repeat: no-repeat;
height: 100%;
animation: fadeIn 1s ease-in;
}
body * {
overflow-wrap: break-word;
}
.border-div {
background: darkgray;
padding: 10px;
position: relative;
border-radius: 20px;
border: black 10px solid;
box-shadow: inset 0 0 20px rgb(255, 132, 132);
margin: 30px;
animation: fadeIn 1s ease-in;
}
.ind {
padding-left: 2em;
}
.home-button {
background: gray;
border-radius: 5px;
border: 2px white solid;
box-shadow: red 0 0 10px;
padding: 5px;
}
.home-button:hover {
background: white;
color: black;
}
.home-button a {
text-decoration: none;
color: white;
}
.home-button:hover a {
color: black;
}
.click-open {
display: none;
}
.click-header {
display: block;
width: fit-content;
color: white;
cursor: pointer;
user-select: none;
}
.click-header:hover {
color: red;
}
.code {
border: 1px black solid;
border-radius: 5px;
padding: 2px;
display: inline-block;
background: rgba(0,0,0, .2);
white-space: pre-wrap;
overflow-wrap: break-word;
max-width: 100%;
}
.section-wrapper {
position: relative;
background: rgba(0, 0, 0, .4);
box-shadow: black 0 0 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin: 10px;
animation: slideUp 1s ease-out forwards;
}
.section-wrapper::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid;
border-radius: 5px;
z-index: -1;
}
h1 {
text-decoration: underline;
}
.hl-both::after {
content: "[BOTH]";
background: yellow;
color: black;
border-radius: 5px;
display: inline-block;
}
.hl-pass::after {
content: "[PASS]";
background: red;
color: white;
border-radius: 5px;
display: inline-block;
}
.hl-hash::after {
content: "[HASH]";
background: orange;
color: black;
border-radius: 5px;
display: inline-block;
}
.inlay-link::before {
content: "[+]\00a0";
}
.inlay-link {
display: block;
text-decoration: none;
color: white;
}
.inlay-link:hover {
color: red;
}
.ul-format {
font-size: 20px;
}
.mkdwn-img {
height: 30px;
display: inline-block;
overflow: none;
transition: transform 2s;
position: relative;
}
.mkdwn-img:hover {
transform: scale(1.75);
}
.explain-me {
position: relative;
display: inline-block;
width: fit-content;
}
.font-size-wrapper {
font-size: 30px;
}
.explain-me-cont {
border-radius: 5px;
border: 2px solid white;
display: none;
position: absolute;
top: -75px;
width: 200px;
height: fit-content;
text-align: center;
font-size: 15px;
z-index: 2;
}
.explain-me:hover {
text-decoration: underline;
background: gray;
}
.explain-me:hover .explain-me-cont {
display: inline-block;
}
.drop-wrapper {
display: relative;
}
.drop-wrapper:hover {
text-decoration: underline;
}
.drop-wrapper-cont {
position: absolute;
z-index: 2;
display: none;
left: 100px;
box-shadow: 0px 0px 10px black;
background: rgba(0, 0, 0, 1);
border-radius: 5px;
border: 2px white solid;
}
.drop-wrapper:hover .drop-wrapper-cont {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
Код: Выделить всё
[*]
C3 Wiki
Links will become red on hover
Menus will appear over certain items (Those without a [+])
Hash & Password Cracking
[list]
John Suite
[url=./pages/cracking/john.html#john]john [/url]
[url=./pages/cracking/john.html#unshadow]unshadow [/url]
[url=./pages/cracking/john.html#zip2john]zip2john [/url]
[url=./pages/cracking/john.html#rar2john]rar2john [/url]
[url=./pages/cracking/john.html#ssh2john]ssh2john [/url]
[*][url=./pages/cracking/cracking.html#hydra]Hydra [/url]
[*][url=./pages/cracking/cracking.html#hashcat]Hashcat [/url]
[*][url=https://hashes.com/en/decrypt/hash]hashes.com [/url]
[*][url=https://crackstation.net/]Crackstation [/url]
[/list]
Discovery/Enumeration
Directory
[list]
[*][url=./pages/discovery/directory.html#gobuster]gobuster[/url]
[*][url=./pages/discovery/directory.html#dirb]dirb[/url]
[*][url=./pages/discovery/directory.html#dirbuster]dirbuster[/url]
[*][url=./pages/discovery/directory.html#find]find[/url]
[/list]
Protocol Enumeration
[list]
[*][url=./pages/discovery/protocol-enum.html#enum4linux]Enum4Linux[/url]
[*][url=./pages/discovery/protocol-enum.html#nmap]NMAP[/url]
[*][url=./pages/discovery/protocol-enum.html#dnsenum]DNSenum and Dig[/url]
[/list]
Exploitation
[list]
[*]
Metasploit Suite
[url=./pages/exploitation/metasploit.html#meterpreter]Meterpreter[/url]
[url=./pages/exploitation/metasploit.html#msfconsole]Metasploit Framework Console(msfconsole)[/url]
[url=./pages/exploitation/metasploit.html#searchsploit]Searchsploit[/url]
[url=./pages/exploitation/metasploit.html#msfvenom]Msfvenom[/url]
[*]
Other Exploitation Tools
[url=./pages/exploitation/other_exploitation.html#smbmap]SMBMap[/url]
[url=./pages/exploitation/other_exploitation.html#linpeas]LinPEAS/WinPEAS[/url]
[url=./pages/exploitation/other_exploitation.html#wpscan]WPScan[/url]
[/list]
File Downloads / Uploads
[list]
[*][url=./ pages/upload/updown.html#wget]wget[/url]
[*][url=./pages/upload/updown.html#smbget]smbget[/url]
[*][url=./pages/upload/updown.html#git]git clone[/url]
[*][url=./pages/upload/updown.html#python]python web server[/url]
[*][url=./pages/upload/updown.html#curl]curl[/url]
[/list]
[url=https://gtfobins.github.io/]GTFOBins[/url]
[*]Reverse shell cheat sheet: [url=https://pentestmonkey.net/cheat-sheet/shells/reverse-shell-cheat-sheet]pentestmonkey[/url]
[/list]
function showItem(id) {
var x = document.getElementById(id);
if (x.style.display === "none" || x.style.display === "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
Я попытался изменить значение z-index всех этих элементов div. несколько раз, устанавливая для drop-wrapper-cont что-нибудь нелепое, например «999», или для .section-wrapper значение «-1». Я также пробовал экспериментировать с опцией «режим смешивания-наложения», но безрезультатно. Я просто в тупике, потому что я сижу здесь и неоднократно пробую что-то, но, похоже, мне, возможно, придется реструктурировать HTML, чтобы родители не делали странных вещей с z-индексом?
РЕДАКТИРОВАТЬ: включен полный HTML/CSS, исходный фрагмент соответствующего кода не изменил визуальное представление с правильным ответом
Подробнее здесь: https://stackoverflow.com/questions/782 ... n-html-css