Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 9

7
votes
answers
58 views
+10

在悬停时翻转半圆

我想在悬停时翻转半圆。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; }   
 < div class =“main”> < div style =“height:100px;”> < / DIV> < div class =“btm” > < / DIV> < / DIV>     

上面的代码圆圈的底部是红色的,我想要的只是我想让圆圈的顶部成为悬停时红色

任何帮助都会得到赞赏。

沙发
+30
+50

您可以使用线性渐变(180度,透明50%,红色50%); 轻松实现此目的。你可以在主要部门悬停时交换颜色。希望这是你要找的。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 背景:线性梯度(180度,透明度50%,红色50%); } .main:hover {background:linear-gradient(180deg,red 50%,transparent 50%); }   
 
			
        
+30

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 过渡:全部0.5秒轻松; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; 过渡:全部0.5秒轻松; } .div-1 {border-top-left-radius:190px; 过渡:全部0.5秒轻松; border-top-right-radius:190px; } .main:hover .div-1 {background:red; 过渡:全部0.5秒轻松; } .main:hover .btm {background:white; 过渡:全部0.5秒轻松; }   < pre class =“snippet-code-html lang-html prettyprint-override”> &lt;!DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;     

我添加了过渡效果并使用了您的代码!希望它能帮助 DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助

+10

试试这个。

  .main {position:relative; 身高:200px; 宽度:200px; 边框:2px实心绿色; border-radius:190px; } .semi-circle {position:absolute; 位置:绝对; border-bottom-left-radius:200px; border-bottom-right-radius:200px; 背景颜色:红色; 身高:100px; 宽度:200px; 最高:50%; } .main:hover .semi-circle {transform:rotate(180deg); 最高:0%; }   
 &lt; div class =“main”&gt; &lt; div class =“semi-circle”&gt; &LT; / DIV&GT; &lt; / div&gt;    

     
			
        
0

你所要做的就是将你的div翻译到顶部,同时将它旋转到180度。

同样有一个CSS属性 transform:translate(tx) ,ty)旋转(度);

这里 tx 代表像素,你要翻译 x-axis ,< code> ty 代表像素,你要在 y轴上翻译, degrees 代表你想要旋转对象的度数。

你的代码是一样的。我刚刚添加了一个CSS类来使它工作。看看。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。

0

这是一个依赖于 background-clip

  .main {边框:2px实心绿色; border-radius:50%; 身高:200px; 宽度:200px; 箱尺寸:边界盒; 背景色:红色; 背景剪辑:内容盒; 填充:100px 0 0; } .main:hover {padding:0 0 100px; }   
 &lt; div class =“main”&gt; &lt; / div&gt;     < p>您可以轻松转换的位置: 

  .main {border:2px solid green ; border-radius:50%; 身高:200px; 宽度:200px; 箱尺寸:边界盒; 背景色:红色; 背景剪辑:内容盒; 填充:100px 0 0; 过渡:1秒; } .main:hover {padding:0 0 100px; }   
 &lt; div class =“main”&gt; &lt; / div&gt;     

如果你想要一个翻译动画,这里有一个渐变的想法:

  .main {border :2px纯绿色; border-radius:50%; 身高:200px; 宽度:200px; 背景:线性渐变(红色,红色)底部; 背景大小:100%50%; 背景重复:不重复; 过渡:1秒; } .main:hover {background-position:top; }   
 &lt; div class =“main”&gt; &LT; / DIV&GT;  

     
			
        
0

你可以看到这个例子:

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 位置:相对; 溢出:隐藏; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; 位置:绝对的; 最高:50%; 左:0; 宽度:100%; 过渡:.3s; } .main:hover .btm {top:0; border-top-left-radius:190px; border-top-right-radius:190px; border-bottom-left-radius:0; border-bottom-right-radius:0; }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;    

     
			
        

最初我希望在悬停时底部看起来是红色的我想让顶部变红。 - 昨天的Deepshika S.

在你的答案中,最初的底部不是红色 - 昨天的Deepshika S.

请检查我的更新代码。:) - TanBir开发人员23小时前

0
votes
answers
43 views
+10

如何檢測夜間模式事件 - JavaScript?

0

是否有任何用於改變模式時觸發的夜間模式或javascript事件的CSS前綴?如果用戶啓用夜間模式,我需要元素的自定義顏色。如何檢測夜間模式事件 - JavaScript?

另外如何觸發夜間模式事件像Twitter呢?

感謝

+0

沒有它不是,如果用戶能夠從瀏覽器夜間模式設置 –

沙发
0
0

因爲「夜間模式」,將不僅涉及改變背景顏色,而且字體顏色(加上可能有很多其他的事情)我會推薦一個解決方案,如本:

例如HTML:現在

<body class="night"> 

,在標準模式下body標籤不會有night類默認,但你會通過撥動類福添加此比如jQuery的toggleClass

然後在CSS這樣做...

CSS:

body { 
    color: #000; 
    background-color: #fff; 
} 

body.night { 
    color: #fff; 
    background-color: #000;  
} 

注:僅作爲舉例,請不要在黑色背景上用白色文本:)

現在,當班級切換並添加night類時,所有顏色都會改變,頁面將處於「夜間」模式。

不確定您是否還想要在頁面刷新/導航期間使此模式「粘」的說明;如果是這樣的話,那麼最好在sessioncookie的情況下處理,因爲這會在瀏覽器關閉時過期。

+0

但是,如何檢測用戶改變國防部工作e? –

+0

沒有檢測,只有一個功能。可以初始化'darkmode.css'的**按鈕**或**撥號器**(例如)。我通過創建一個'jQuery'函數來實現,當用戶想要啓用'Dark Mode'時,''link type =「stylesheet」href =「darkmode.css>」'到''標籤。但這**不是非常有效,因爲瀏覽器不保存用戶首選項(不啓用緩存)。 –

+0

@IsmailFarooq你是什麼意思「發現」 - 你的意思是我在最後一句話中談論的是什麼?在用戶切換到網站後,確保在網站導航過程中保持夜間模式不變? – Brett

板凳
0
0

有一個CSS濾鏡,我不知道,Twitter的使用是這樣的(沒有圖像倒置只有文本和背景

注1:你可以降低翻轉過濾器的指數,爲前:0.8 注2:不支持IE :(但支持EDGE它

$('button').on('click', function(){ 
 
    $('.wrap').toggleClass('day night') ; 
 
});
.wrap{ 
 
    background: white; 
 
} 
 
.day{ 
 
    filter: invert(0); 
 
} 
 

 
.night{ 
 
    filter: invert(1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wrap day"> 
 
    <img src="https://placeimg.com/200/150/any" /> 
 

 
    <p>Lorem ipsus </p> 
 
    <button>Day/night</button> 
 
    
 
</div>

+0

其實我的主要問題是如何檢測用戶啓用夜間模式或不是 –

+0

在Twitter上具體您認爲? –

+0

手機瀏覽器上有一個選項,尤其是「啓用夜間模式」我想跟蹤該選項是否有任何事件呢? –

0
votes
answers
88 views
+10

jquery移動更改複選框顏色

0

當選中其他顏色時,如何更改複選框顏色(藍色)和複選框圖標顏色(白色)。jquery移動更改複選框顏色

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
    <form> 
 
     <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
    </form>

+0

雖然改變背景顏色是微不足道的CSS,爲圖標的顏色有兩種顏色集:*白色*和*黑*。您可以通過應用「ui-alt-icon」類來顯示*黑色*圖標。您無法着色圖標,因爲圖標圖像未內聯。以下是替代圖標集的參考資料:http://demos.jquerymobile.com/1.4.5/icons/ – deblocker

沙发
0
0

對於藍色:

.ui-btn.ui-checkbox-on.ui-btn-a:after { 
    background-color: red !important; 
} 

白色的圖標是一個SVG:

.ui-icon-check:after { 
    background-image: url(newicon.svg); 
} 
板凳
0
0

所有你需要做的是確定所使用的類由jquery。之後,你可以簡單地套用屬性這樣

.ui-btn.ui-checkbox-on:after { 
 
    background-color: red !important; 
 
} 
 

 
.ui-btn.ui-checkbox-off:after { 
 
    background-color: blue !important; 
 
}
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
 
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 

 
<form> 
 
    <label> 
 
      <input type="checkbox" name="checkbox-0 ">Check me 
 
     </label> 
 
</form>

0
votes
answers
72 views
+10

哪個圖像擴展對質量和性能(速度)更好?

0

我有一個html網站(純HTMl,CSS,JS),我正在使用一些圖像(主圖像 - 一些圖標),用於主圖像(每個頁面頂部的圖像覆蓋所有寬度)每個大約是3000 x 1264。哪個圖像擴展對質量和性能(速度)更好?

例如所謂的「」的形象,如果我使用「PNG」擴展規模將約2MB,如果我使用「JPG」大小會約700KB,對於性能和速度,我會選擇「JPG」,因爲它大約小於「PNG」的一半,但恐怕這可能會影響圖像質量。

所以我想知道什麼是最好的擴展使用,不會影響性能和圖像質量? 它不必是「PNG」或「JPG」

沙发
0
0

取決於。例如,對於照片來說,JPG通常是一種很好的妥協方式,對於需要透明度的圖形元素來說,PNG是一種妥協。

一般來說,網頁的2MB圖片太多了。您必須在質量和重量之間妥協,並使用壓縮工具,如ShortPixel

板凳
0
0

它們都有它們的用途。

JPEG

JPG文件已成爲互聯網事實上的標準圖像,因爲它們可以被壓縮這麼多。根據您的設置,典型的JPG可以以2:1到100:1之間的任何比例進行壓縮。特別是在撥號互聯網時代,JPG是唯一可行的發送圖像信息的方式。

但是,由於JPG的有損性質,它不是存儲藝術品文件的理想方式。即使是最高質量的JPG設置也會被壓縮,並且會稍微改變圖像的外觀。 JPG也不適合印刷,清晰的線條,甚至邊緣鋒利的照片,因爲它們通常會因反鋸齒而變得模糊或模糊。可能更糟糕的是,這種損失可能會累積 - 保存多個版本的作品可能會導致每次保存降級。即使這樣,通常也會將這些內容保存爲JPG,這僅僅是因爲文件類型非常普遍。

PNG

PNG支持8位色如GIF,而且還支持24位色RGB,像JPG一樣。它們也是無損文件,壓縮照片圖像而不降低圖像質量。 PNG往往是三種文件類型中最大的一種,並且一些(通常是較老的)瀏覽器不支持PNG。

除了是一種優秀的透明度格式之外,24位PNG的無損性質非常適用於屏幕截圖軟件,允許用於像素重現桌面環境的像素。

0
votes
answers
43 views
+10

@keyframes動畫(旋轉)和:懸停(縮放)

1

我有一個基於@keyframes(旋轉)與:懸停效果(比例)的combinig css動畫的問題 - 並需要一些更有經驗的人幫助我(我菜鳥 - 這很明顯)。@keyframes動畫(旋轉)和:懸停(縮放)

我想創建某種動畫背景,在哪裏:
1.不與用戶進行任何交互:小符號/字母/圖標(任何)正在(其中一些轉圈,在X的一些移動或Y軸); 2:懸停時:它們也在增長(但仍在移動);
最後:
3.沒有暫停beetwen @keyframe動畫。

現在我已經想出了這個代碼https://jsfiddle.net/56q4b9fg/2/問題是,在:懸停我的基本動畫從頭開始,而不是繼續他們的軌道。我怎樣才能解決這個問題?以及如何解決我的第三個問題,每個序列後暫停?

.pattern { 
    height: 100vh; 
    width: 100vw; 
    margin: 0 auto; 
    background-color: rgb(170, 57, 57); 
    color: rgb(255,255,255); 
} 

.grid { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    grid-template-rows: repeat(8, 1fr); 
    justify-items: center; 
    align-items: center; 
    overflow: hidden; 
} 

.symbol-1 { 
    grid-area: 2/2/2/2; 
    justify-self: center; 
} 

.symbol-2 { 
    grid-area: 4/3/3/5; 
    justify-self: center; 
    align-self: start; 
} 

.downRight { 
    animation: downRight 7s infinite; 
} 

.downRight:hover { 
    animation: downRightAndScale 7s infinite; 
} 

.spin { 
    animation: spin 7s infinite; 
} 

.spin:hover { 
    animation: spinAndScale 7s infinite; 
} 

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
} 

@keyframes downRight { 
    0%, 100% { transform: translateX(0) translateY(0); } 
    50% { transform: translateX(20px) translateY(20px); } 
} 

@keyframes spinAndScale { 
    0% { transform: rotate(0deg) scale(1.0); } 
    10% { transform: rotate(10deg) scale(1.1); } 
    50% { transform: rotate(180deg) scale(1.5); } 
    100% { transform: rotate(360deg) scale(1.0); } 
} 

@keyframes downRightAndScale { 
    0%, 100% { transform: translateX(0) translateY(0) scale(1.0);} 
    50% { transform: translateX(20px) translateY(20px) scale(1.5);} 
} 
沙发
0
0

最簡單的解決方案將是包裝在另一個元件的symbol-1symbol-2和盤旋時變換這個元素。也可以使用一個轉換來爲其設置動畫。看看下面插入的代碼片段。

.pattern { 
 
	 height: 100vh; 
 
	 width: 100vw; 
 
	 margin: 0 auto; 
 
    background-color: rgb(170, 57, 57); 
 
    color: rgb(255,255,255); 
 
} 
 

 
.grid { 
 
	 display: grid; 
 
	 grid-template-columns: repeat(12, 1fr); 
 
	 grid-template-rows: repeat(8, 1fr); 
 
	 justify-items: center; 
 
	 align-items: center; 
 
	 overflow: hidden; 
 
} 
 

 
.symbol { 
 
	 -webkit-transition: all 1000ms ease; 
 
	 -moz-transition: all 1000ms ease; 
 
	 -o-transition: all 1000ms ease; 
 
	 transition: all 1000ms ease; 
 
    transform: scale(0.5); 
 
    font-size: 2em 
 
} 
 

 
.symbol:hover { 
 
    transform: scale(1); 
 
} 
 

 
.symbol-1 { 
 
	 grid-area: 2/2/2/2; 
 
	 justify-self: center; 
 
} 
 

 
.symbol-2 { 
 
	 grid-area: 4/3/3/5; 
 
	 justify-self: center; 
 
	 align-self: start; 
 
} 
 

 
.downRight { 
 
	 animation: downRight 7s infinite; 
 
} 
 

 
.spin { 
 
	 animation: spin 7s infinite; 
 
} 
 

 
@keyframes spin { 
 
	 0% { transform: rotate(0deg); } 
 
	 100% { transform: rotate(360deg); } 
 
} 
 

 
@keyframes downRight { 
 
	 0%, 100% { transform: translateX(0) translateY(0); } 
 
	 50% { transform: translateX(20px) translateY(20px); } 
 
}
<body> 
 
    <div class="pattern grid"> 
 
    <!-- Wrap the symbols in a div with class "symbol" that scales on hover --> 
 
    	 <div class="symbol symbol-1"><div class="downRight"> 	 1 	 </div></div> 
 
    <div class="symbol symbol-2"><div class="spin"> 	 2 	 </div></div> 
 
    </div> 
 
</body>

我相信這能解決你的問題:)

+0

喜(我想我已經刪除了我的意外最後的評論 - 偉大的...)。你的解決方案解決了我的問題(謝謝!),但是CSS網格定位呢?它看起來不再工作:/我也嘗試添加網格到.symbol,但是我回到了原來的一個 - 與:懸停不工作...我怎麼能結合在一起:用css定位的動畫元素網格與:懸停? –

+0

對不起,只需將'symbol-1'和'symbol-2'類交換到它們的父元素即可。請查看更新後的代碼段。另外,如果我的答案解決了您的問題,請將其標記爲正確答案,謝謝! :) – Evochrome

+0

謝謝!一切工作完美:) –

0
votes
answers
39 views
+10

如果一個元素有一個特定的類做的另一件

0

上......我有jQuery的.hasClass方法的問題。如果一個元素有一個特定的類做的另一件

例如,如果存在.show類的div元素,我希望我的菜單按鈕顏色變爲紅色。

所以我寫了這個代碼解釋這個解決方案

if ($(".navbar-collapse").hasClass("show")) 
    $(".menuIcon").css("color", "red"); 

但是當我測試此代碼沒有工作...... 我怎麼能解決這個問題?

+0

你可以發表你的目標代碼? –

沙发
0
0

試試這個:

$(".navbar-collapse.show").find(".menuIcon").css("color", "red"); 

你可以改變菜單中的事件相關聯。

+0

不,它不是關於{}當我測試的另一個例子 –

+0

好吧,看更新,將工作:)你可以避開狀態。 – Nick

板凳
0
0

只有CSS:

.navbar-collapse.show { 
    color:red!important; 
} 
地板
0
1

你的代碼是完全正確的,它應該工作。只要確保
1-你的jQuery庫是存在,coreectly加載。
2-與您的代碼相關的樣式存在於頁面中並且爲真
3-在$(document).ready(function(){ });中包含您的代碼,以確保樣式在代碼執行前加載。

$(document).ready(function(){ 
    if ($(".navbar-collapse").hasClass("show")){ 
     $(".menuIcon").css("color", "red"); 
     } 
}); 
+0

你確定嗎?因爲我認爲我不得不使用另一種方法,因爲我的show類不是靜態的,它將在一個元素中! –

4楼
0
0

您的代碼看起來是不錯,但您所遇到的問題可能是由於一個或多個以下:

  • 你可能會丟失包括jQuery的(包括它使用script如果標籤的話)
  • 你可能有一個錯誤在控制檯(修復它如果是的話)
  • 您的代碼可能具有showclass創建或前您的標記之前執行class被添加到該標籤
  • showclass可能被添加到另一個標籤
  • 您可能希望覆蓋background-color代替color
  • 另一個JavaScript可能會覆蓋您期望的行爲

要獲得更確切的回答,你需要問一個更確切的問題。

+0

我稍後再試試這個.... –

+0

我認爲這可能是有關!在CSS –

+0

@ mr.md重要的關鍵字!重要覆蓋任何其他規則。什麼規則對你來說很重要? –

0
votes
answers
44 views
+10

語義UI卡左側有圖像

1

使用語義UI卡有可能在左側有圖像嗎?該文檔顯示圖像始終位於頂部的示例。我想要得到的東西,如語義UI項目(但我當然希望用卡),像這樣:語義UI卡左側有圖像

enter image description here

我想要得到的是這樣的:

enter image description here

正如您所看到的,圖像位於左側,與Semantic UI卡類似。

+0

我認爲這是不可能的,只有語義UI CSS類,但我會很高興看到可能的解決方案並將其用於我自己,這就是爲什麼+1 –

沙发
0
1

你可以用語義成分做的最好的應該是這樣:

<div class="ui card" style="max-width: 100%; min-width: 100%;"> 
    <div class="content" style="padding: 0;"> 
     <div class="ui items"> 
      <div class="item"> 
       <div class="ui medium image"> 
        <img src="https://semantic-ui.com/images/wireframe/image.png"> 
       </div> 
       <div class="content" style="padding: 1rem;"> 
        <a class="header">12 Years a Slave</a> 
        <div class="meta"> 
         <span class="cinema">Union Square 14</span> 
        </div> 
        <div class="description"> 
         <p></p> 
        </div> 
        <div class="extra"> 
         <div class="ui label">IMAX</div> 
         <div class="ui label"><i class="globe icon"></i> Additional Languages</div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="extra content"> 
     <a> 
      More Info 
     </a> 
    </div> 
</div> 

我已經改變的內容padding但這是唯一使用的自定義CSS。

爲了使它看起來完全像你的形象,你將需要使你自己的組件/風格。

0
votes
answers
50 views
+10

爲什麼我在客戶端出現錯誤`無法加載資源`?

0

我有這個元素在我的index.cshtml頁:爲什麼我在客戶端出現錯誤`無法加載資源`?

<section class="parallax parallax-2 padding-xxs" style="background-image: url('mySiteName/assets/images/shutterstoc/img1.jpg');"> 
    <div>some content </div> 
</section> 

正如你可以看到我有樣式屬性。

如果我改變風格屬性,這一點:

style="background-image: url('~/assets/images/shutterstoc/img1.jpg');" 

的背景圖像消失,我得到這個錯誤在Web控制檯:

Failed to load resource: the server responded with a status of 404 (Not Found) img1.jpg 

**更新*

The path to the image is: 
http://localhost/assets/images/shutterstoc/img1.jpg 
As you can see the mySiteName is missing. 

更新2: 我試試這個路徑:

<section class="parallax parallax-2 padding-xxs" style="background-image: url('./assets/images/img1.jpg')"> 

但我仍然得到上面的錯誤。 爲什麼我得到錯誤Failed to load resource以及如何解決它?

+0

爲什麼'?'而不是'.'? –

+0

只是使用'。 '而不是 –

+0

點的意義是什麼? – Michael

沙发
0
1

可以在剃刀視圖中使用蒂爾達標誌~以獲取應用根路徑。它不適用於CSS樣式表文件。

當剃鬚刀執行該視圖時,如果它發現~,它將被轉換爲應用根目錄路徑。

只需使用路徑沒有~

background-image: url('./assets/images/shutterstoc/img1.jpg'); 

圖片網址是相對樣式表。因此,根據樣式表和資產目錄的位置,根據需要將前綴.調整爲../

.someCssClass { 
    background-image: url('./assets/images/shutterstoc/img1.jpg'); 
} 

就像我如上所述,該圖像位置是相對於樣式表的位置。如果您在視圖/頁面中強制編碼風格,則它將與頁面的網址相關。因此,雖然請求yourSiteBaseUrl/有效,但即使這兩條路由返回相同的操作方法和視圖/頁面,yourSiteBaseUrl/Home/yourSiteBaseUrl/Home/Index也不會起作用,也不起作用。所以我建議不要那樣做。

將定義移動到css文件並在其中使用正確的相對路徑。它然後將工作yourSiteBaseUrl/Home/IndexyourSiteBaseUrl/HomeyourSiteBaseUrl

+0

感謝發表!之後有什麼意義 - '? – Michael

+0

您的意思是? – Shyju

+0

@Michael'.'表示當前文件夾,'..'表示父文件夾 –

0
votes
answers
64 views
+10

div`s CSS轉換問題之間的鍵盤導航

2

我正在轉換div之間的CSS轉換,它將用作無鼠標應用程序的標頭。過渡給人感覺兩個相鄰元素之間的「流動」。 你可以在這裏看到我迄今爲止所做的工作:https://codepen.io/anon/pen/GOWVGR。元素的焦點使用左側的'a'鍵和右側的's'鍵進行控制。div`s CSS轉換問題之間的鍵盤導航

我幾乎使它的工作使用漸變和背景位置過渡,除了我不知道如何編碼只向一個方向移動時的效果,前一個元素「背景」返回到初始背景位置而不是「跟隨」新選擇的div背景位置。

.left, .right { 
    background-size: 202% 100%; 
    background-image: linear-gradient(to right, transparent 50%,green 50%); 
    -webkit-transition: background-position .3s ease-in-out; 
    -moz-transition: background-position .3s ease-in-out; 
    transition: background-position .3s ease-in-out; 
} 

.left:focus { 
    background-position: 100% 0; 
} 

.right:focus { 
    background-position: -100% 0; 
} 

所需的效果只在一種情況下「工作」,如果按右 - 左(S - A)或左右(一 - S)在我創建了演示。我還添加了以下圖像,以便更容易理解所需的效果。 Desired flow of menu

任何想法將非常感激!謝謝!

+0

你有結束元素,它沒有返回的第一個元素,反之亦然有問題嗎?或者當你在一個方向上單擊多次時,是否對轉換有問題? – 1stthomas

+0

嗨托馬斯,當我點擊多個時間點擊一個方向時,我遇到了「無焦點」元素轉換的問題。 – Dragos

沙发
0
0

我設法創建大多數使用JavaScript的動畫。該代碼將以下「animatedBg」CSS類添加到當前元素和以前的元素,並修改兩個元素的背景位置,從而實現我要求的動畫效果。

我現在需要找到一種方法來保持動畫的流暢性,當按住方向按鈕時。

可以使用左右箭頭測試波紋管片段。

document.getElementById("1").focus(); 
 
var current = 0; 
 
var cls = "right"; 
 

 
var positions = [-100, "x", "x", "x" , "x"]; 
 
updateItems(); 
 
addEventListener("keydown", function (event) { 
 
    if (event.keyCode === 37) { 
 
     if (current === 0) { 
 
      return; 
 
     } 
 
     current--; 
 

 
     var newPositions = ["x", "x", "x", "x" , "x"];; 
 
     if (cls === "left") { 
 
      newPositions[current] = 100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = -100; 
 
      } else { 
 
       newPositions[current] = 100; 
 
      } 
 
     } 
 
     newPositions[current + 1] = positions[current + 1] + 100; 
 
     cls = "left"; 
 
     positions = newPositions; 
 

 
    } 
 
    if (event.keyCode === 39) { 
 
     if (current === 4) { 
 
      return; 
 
     } 
 
     current++; 
 
     var newPositions = ["x", "x", "x", "x" , "x"]; 
 
     if (cls === "right") { 
 
      newPositions[current] = -100; 
 
     } else { 
 
      if (positions[current] !== 0) { 
 
       newPositions[current] = 100; 
 
      } else { 
 
       newPositions[current] = -100; 
 
      } 
 
     } 
 
     newPositions[current - 1] = positions[current - 1] - 100; 
 
     cls = "right"; 
 
     positions = newPositions; 
 
    } 
 
    updateItems(); 
 
}); 
 

 
function updateItems() { 
 
    for (var i = 0; i < 5; i++) { 
 
     var element = document.getElementById("" + i); 
 

 
     if(positions[i] === "x") { 
 
      if (element.classList.contains("animatedBg")){ 
 
       element.classList.remove("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = "0 0"; 
 
     } 
 
     if (positions[i] !== "x") { 
 
      if(!element.classList.contains("animatedBg")){ 
 
       element.classList.add("animatedBg"); 
 
      } 
 
      element.style.backgroundPosition = positions[i] + "% 0"; 
 
     } 
 
    } 
 
}
body { 
 
    width: 100%; 
 
    margin: 0; 
 
    overflow-x: hidden; 
 
} 
 

 
.container { 
 
    height: 140px; 
 
    display: flex; 
 
    background-color: rgba(0,0,0,0.8); 
 
    z-index: 1000; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 

 
.item { 
 
    height: 60px; 
 
    padding: 60px 0px 20px; 
 
} 
 

 
.item a { 
 
    color: white; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    padding: 20px; 
 
    outline: 0px; 
 
} 
 

 
.animatedBg { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, transparent 51%,green 50%); 
 
    -webkit-transition: background-position .2s ease-in-out; 
 
    -moz-transition: background-position .2s ease-in-out; 
 
    transition: background-position .2s ease-in-out; 
 
}
<div class="container"> 
 
	 <div class="item"> 
 
	 	 <a id="0" class="animatedBg" href="/1" tabindex="-1">1</a> 
 
	 </div> 
 
	 <div class="item"> 
 
	 	 <a id="1" class="" href="/2" tabindex="-1">22</a> 
 
	 </div> 
 
	 <div class="item"> 
 
	 	 <a id="2" class="" href="/3" tabindex="-1">333</a> 
 
	 </div> 
 
    <div class="item"> 
 
	 	 <a id="3" class="" href="/4" tabindex="-1">4444</a> 
 
	 </div> 
 
    <div class="item"> 
 
	 	 <a id="4" class="" href="/3" tabindex="-1">55555</a> 
 
	 </div> 
 
</div>

0
votes
answers
38 views
+10

複選框 - 用fa-link替換複選標記

0

我有一個複選框設置。我試圖讓它顯示一個Font Awesome圖標。即,選中時爲fa-link,未選中時爲空。複選框 - 用fa-link替換複選標記

下面是代碼:

input[type="checkbox"] { 
 
    -webkit-appearance: initial; 
 
    appearance: initial; 
 
    outline: 1px solid #A9A9A9; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #FFFFFF; 
 
    position: relative; 
 
} 
 

 
input[type="checkbox"]:checked { 
 
    background: #0073C0; 
 
} 
 

 
input[type="checkbox"]:checked:after { 
 
    content: "2713"; 
 
    color: #fff; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    outline: 1px solid #A9A9A9; 
 
}
<input id="box1" type="checkbox" />

它應該是這樣的:

我似乎無法想出解決辦法。

+0

如果你想渲染你需要設置'FONT-FAMILY一個字體真棒圖標:「FontAwesome」;',你在''的設置content'爲Unicode字符:after'風格 – zgood

沙发
0
2

要使用這樣的Font Awesome圖標,您需要將字體系列設置爲FontAwesome,並在其中設置內容的Unicode字符。此外,請確保您使用的是正確的Unicode字符(鏈接圖標及其f0c1

像這樣:

input[type="checkbox"]:checked:after { 
    font-family: 'FontAwesome'; 
    content: "f0c1"; 
    .... 
} 

的演示中看到這個fiddle

+0

即使世界白色虛線鏈接周圍的虛線框。我怎樣才能刪除這個?謝謝 – piddler

+0

那是因爲你的風格是'outline:1px solid#A9A9A9;',只需將其刪除 – zgood