나는 아이콘의 배경 (Material-UI에서)을 나머지 목록 항목과 같은 색상으로 만들려고했습니다.
전체 클래스 (className = "dd-content-item")의 스타일을 지정할 때 CSS가 아이콘과 텍스트 모두에 적용되지 않는 이유가 확실하지 않습니다. 어떤 도움을 주셔서 감사합니다!
CSS :
/*This styling applies to each list element in the dropdown-content*/
.dd-content-item {
color: #1D3557;
padding: 12px 16px;
text-decoration: none;
display: block;
list-style-type: none;
cursor: pointer;
justify-content: center;
background-color: none;
}
/*Hovering over a list element in the dropdown menu colors it darkly*/
.delete-icon, .archive-icon{
position: relative;
top: 6px;
}
.favorite-icon, .tag-icon {
position: relative;
top: 7px;
}
.dd-content-item:hover {
background-color: #D3EDEE;
}
/*When you hover over the dropdown-content, it is displayed as a block*/
.dd-wrapper:hover .dd-content {
display: block;
}
어떤 종류의 아이콘을 사용하고 있습니까? 이미지 또는 SVG 또는 무엇입니까? 이미지에 투명한 배경이 없을 가능성이 있습니다.
그렇지 않으면 이와 같은 것이 도움이 될 수 있습니다.
.dd-content-item:hover,
.dd-content-item:hover .delete-icon,
.dd-content-item:hover .archive-icon,
.dd-content-item:hover .favorite-icon,
.dd-content-item:hover .tag-icon {
background-color: #D3EDEE;
}
이미지가 어떻게 작동하는지 또는 어떤 유형의 대상인지 알 수 없기 때문에 진단하거나 실제로 말하기가 어렵습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다