私はTwitterブートストラップを使用して自分用の小さなブログサイトを構築してきましたが、最近、サードパーティのfileuploadアプリをプロジェクトに導入する必要がありました。ファイルアップローダーには、「アップロードボタン」のスタイルを設定するための関連するCSSファイルがあり、JS要素がそれぞれのマークアップを作成します。
問題は、HTMLを見るときです。カーソルが「アップロードボタン」に向いていると、「手」ではなくIビームのように見えます。また、奇妙なことに、「行」全体に「手」カーソルが表示されます。アップロードボタンの、ただしアップロードボタンではありません(アップロードボタンの上にIビームがあります)。
これを「純粋なTwitterブートストラップボタン」に追加したいのですが、この問題は発生しませんが、このサードパーティ製アプリを統合した場合にのみ発生します。たとえば、カーソルパラメータを変更しようとしましたが、何も機能しないようです。関連するコードは次のとおりです。
したがって、私のHTMLには、次のものがあります。
<div id="file-uploader"></div>
私のCSSは次のようになります。
.qq-uploader { position:relative; width: 100%; cursor: pointer;}
.qq-upload-button {
font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;
display: inline-block;
*display: inline;
padding: 10px 10px 10px;
margin-top:0px;
margin-bottom: 0;
*margin-left: .3em;
font-size: 16px;
line-height: 10px;
*line-height: 20px;
color: #ffffff;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #0074cc;
*background-color: #0055cc;
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc', endColorstr='#0055cc', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
*zoom: 1;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.qq-upload-button-hover {background:#0055cc;cursor: default;}
.qq-upload-button-focus {outline:1px dotted black;cursor: default;}
.qq-upload-drop-area {
position:absolute; top:0; left:0; width:100%; height:100%; min-height: 70px; z-index:2;
background:#FF9797; text-align:center;
}
.qq-upload-drop-area span {
display:block; position:absolute; top: 50%; width:100%; margin-top:-8px; font-size:16px;
}
.qq-upload-drop-area-active {background:#FF7171;}
.qq-upload-list {margin:15px 35px; padding:0; list-style:disc;}
.qq-upload-list li { margin:0; padding:0; line-height:15px; font-size:15px;font-family: Qlassik,'Qlassik Medium',fallback_Qlassik,sans-serif;}
.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text {
margin-right: 7px;
}
.qq-upload-file {}
.qq-upload-spinner {display:inline-block; background: url("loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
.qq-upload-size,.qq-upload-cancel {font-size:15px;}
.qq-upload-failed-text {display:none;}
.qq-upload-fail .qq-upload-failed-text {display:inline;}
関連するJavaScriptはここ(https://github.com/GoodCloud/django-ajax-uploader/blob/master/ajaxuploader/static/ajaxuploader/js/fileuploader.js)にあります-それが役立つ場合。
問題を解決するために必要なヒントやガイダンスをいただければ幸いです。