小贝子编程

转弯过渡，用！重要价值，时断时续



因此，我为页面中的一个部分获得了这段代码，该部分在css上使用了"！important"值以使其正常工作，但我觉得这可能会影响其响应方面。我目前在小型设备上使该部分看起来正常，但一旦我点击(或悬停(该部分的任何位置，这个部分再次变得奇怪，我忍不住认为.projects-others:hover {width: 60% !important;}在后面，因为它不允许我关闭转换。我如何才能在小型设备上取下它，但保持正常大小？我甚至试过把！重要值的转换查询，但仍然没有运气。

/*project section starts*/
.projects {
overflow: hidden;
height: 27em;
margin-top: 50px;
border: ;
}
.projects a {
cursor: default;
}
.box {
box-sizing: border-box;
box-shadow: 1.1px 1.2px #595959;
}
.projects h1 {
font-size: 4.40em;
text-align: center;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.9);
font-family: 'Dancing Script', cursive;
line-height: 80px;
padding-top: 2px;
}
.projects-others,
.projects-coding {
width: 50%;
-moz-transition: width .3s;
-webkit-transition: width .3s;
-o-transition: width .3s;
transition: width .3s;
height: 27em;
padding: 1em;
box-sizing: border-box;
}
.projects-others {
float: right;
background: #00004d;
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.projects-coding {
background: white;
border-right: ;
}
.projects:hover .projects-others {
width: 40%;
}
.projects-coding:hover {
width: 60%;
}
/*the code that I think is causing the problem*/
.projects-others:hover {
width: 60% !important;
}
.projects-others:hover~.projects-coding {
width: 40%;
}
/*courosel section starts*/
.slideshow-container {
max-width: 1000px;
height: 7.5em;
position: relative;
margin: 7.5px auto;
}
.mySlides,
.mySlides2 {
display: none;
}
.project-text {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
font-family: 'Inknut Antiqua', serif;
}
.slideshow-img {
width: 17.4rem;
height: 10.5rem;
border-radius: 5px;
box-shadow: 2.5px 2.5px 2px rgba(0, 0, 0, 0.7);
-webkit-transition: display 1s;
transition: all 1s;
}
.slide-hover-p {
display: none;
}
.slideshow-img:hover+.slide-hover-p {
display: block;
}
.fade-car {
-moz-animation-name: fade-car;
-webkit-animation-name: fade-car;
-moz-animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
}
.previous,
.nexxt {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: ;
font-weight: bold;
font-size: 28px;
transition: 0.85s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.nexxt {
right: 0;
border-radius: 3px 0 0 3px;
}
.previous:hover,
.nexxt:hover {
cursor: pointer;
}
#p-others:hover,
#n-others:hover {
background-color: white;
color: #00004d;
}
#p-coding:hover,
#n-coding:hover {
background-color: #00004d;
color: white;
}
/*courosel media queries*/
@-webkit-keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
@keyframes fade-car {
from {
opacity: 0.4
}
to {
opacity: 1
}
}
@media only screen and (max-width: 300px) {
.previous,
.nexxt,
.text {
font-size: 11px
}
}
#coding-github-btn {
font-size: 1.35em;
font-weight: 400;
background: #00004d;
border: 1px solid #00004d;
transition: all 0.9s;
cursor: pointer;
}
#coding-github-btn:hover,
#coding-github-btn:focus {
background: white;
border: 1px solid #00004d;
color: #00004d;
}
#others-etsy-btn {
font-size: 1.175em;
font-weight: 500;
background: #ffdb4d;
border: 1px solid #ffdb4d;
transition: all 0.6s;
color: #00004d;
cursor: pointer;
}
#others-etsy-btn:hover,
#others-etsy-btn:focus {
opacity: 0.7;
}
/*media queries for section*/
@media only screen and (max-width: 575px) {
.projects {
		height: auto;
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
	}
	.projects a {
		transition: none;
	}
	.projects-others, .projects-coding {
		-moz-transition: none;
		-webkit-transition: none;
		-o-transition: none;
		transition: none;
		height: auto;
		width: 100%;
		max-width: 100%;
		flex: 100%;
	}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Inknut+Antiqua|Dancing+Script|Courgette&display=swap" rel="stylesheet" />
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"><!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="profile-css/profile-stylesheet.css" type="text/css" />
	<link rel="stylesheet" href="profile-css/mq-stylesheet.css" type="text/css" />
</head>
<body>
<!--project section headings-->
<div class="projects">
<a>
<div class="box projects-others" style="color: #ffdb4d;">
<h1 style="color: #ffdb4d;">Projects :<br> Others</h1>
<!--slider starts-->
<div class="slideshow-container">
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/colorado_view2.jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-others" class="previous" onclick="plusSlides(-1)">&#10094;</a>
<a id="n-others" class="nexxt" onclick="plusSlides(1)">&#10095;</a>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<!--slideshow ends-->
<br><br>
<div class="w-100 text-center">
<a id="others-etsy-btn" href="#" class="btn" role="button">My Etsy Store <span class="fa fa-etsy"></span></a>
</div>
</div>
</a>
<a>
<div class="box projects-coding" style="color:#00004d;">
<h1 style="color:#00004d;">Projects :<br> Coding</h1>
<!--second slider starts-->
<div class="slideshow-container">
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<div class="mySlides2 fade-car">
<div class="project-text">
<img src="images/global (35).jpg" class="slideshow-img img-fluid" alt="global6" />
<p class="slide-hover-p"><i>(My Profile Webpage)</i></p>
</div>
</div>
<a id="p-coding" class="previous" onclick="plusSlides2(-1)">&#10094;</a>
<a id="n-coding" class="nexxt" onclick="plusSlides2(1)">&#10095;</a>
<span class="dot2" onclick="currentSlide2(1)"></span>
<span class="dot2" onclick="currentSlide2(2)"></span>
<span class="dot2" onclick="currentSlide2(3)"></span>
</div>
<!--slider ends-->
<br><br>
<div class="w-100 text-center">
<a id="coding-github-btn" href="#" class="btn" role="button">My Repositories <span class="fa fa-github"></span></a>
</div>
</div>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script><!-- Popper JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><!-- Latest compiled bootstrap JavaScript -->
</body>
</html>

在css文件的底部放置一个具有相同类的媒体查询并使用important肯定会解决这个问题。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium