คำถามติดแท็ก css

ฉันได้สร้างม้าหมุนที่มีปุ่มก่อนหน้าและปุ่มถัดไปที่สามารถมองเห็นได้เสมอ ปุ่มเหล่านี้มีสถานะโฮเวอร์พวกเขาเปลี่ยนเป็นสีน้ำเงิน บนอุปกรณ์ระบบสัมผัสเช่น iPad สถานะโฮเวอร์จะเหนียวดังนั้นปุ่มจะยังคงเป็นสีฟ้าหลังจากแตะ ฉันไม่ต้องการสิ่งนั้น ฉันสามารถเพิ่มno-hoverคลาสontouchendสำหรับแต่ละปุ่มและทำให้ CSS เป็นแบบนี้: button:not(.no-hover):hover { background-color: blue; }แต่มันอาจจะไม่ดีสำหรับประสิทธิภาพและไม่ได้จัดการอุปกรณ์เช่น Chromebook Pixel (ซึ่งมีทั้งหน้าจอสัมผัสและเมาส์) อย่างถูกต้อง ฉันสามารถเพิ่มtouchคลาสให้กับdocumentElementและทำให้ CSS ของฉันเป็นแบบนี้: html:not(.touch) button:hover { background-color: blue; }แต่มันก็ไม่ทำงานบนอุปกรณ์ที่มีทั้งการสัมผัสและเมาส์ ontouchendสิ่งที่ผมต้องการคือการเอารัฐเลื่อน แต่ดูเหมือนว่าจะเป็นไปไม่ได้ การมุ่งเน้นองค์ประกอบอื่นไม่ได้ลบสถานะโฮเวอร์ การแตะองค์ประกอบอื่นด้วยตนเองทำได้ แต่ฉันไม่สามารถเรียกใช้งานได้ใน JavaScript การแก้ปัญหาทั้งหมดที่ฉันพบดูเหมือนไม่สมบูรณ์ มีวิธีแก้ไขปัญหาที่สมบูรณ์แบบหรือไม่

144 javascript  css  hover  touch 

ฉันกำลังทำการรวบรวมเนื้อหาล่วงหน้าและเรียกใช้แอปพลิเคชันในโหมดการผลิต หลังจากรวบรวมเมื่อฉันโหลดหน้าดัชนีของฉันฉันได้รับคำเตือนดังต่อไปนี้ในคอนโซล Chrome: Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.ttf?v=2.0.0 prospects:1 OTS parsing error: invalid version tag Failed to decode downloaded font: http://localhost:3000/fonts/ionicons.woff?v=2.0.0 prospects:1 OTS parsing error: invalid version tag ปัญหาก็คือไม่ได้โหลดไอคอนแทนการที่แสดงสี่เหลี่ยม เราใช้แบบอักษรที่กำหนดเองและรหัสคือ: @font-face { font-family: 'icomoon'; src: font-url('icomoon.eot'); src: font-url('icomoon.eot?#iefix') format('embedded-opentype'), font-url('icomoon.ttf') format('truetype'), font-url('icomoon.woff') format('woff'), font-url('icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; …

144 css  asset-pipeline  ruby-on-rails-4.1  custom-font 

ฉันใช้ CSS เพื่อระบุข้อความทริกเกอร์สำหรับส่วนสไลด์ลง jQuery: เช่นเมื่อคุณเลื่อนเมาส์ไปที่ข้อความทริกเกอร์เคอร์เซอร์จะเปลี่ยนเป็นตัวชี้และความทึบของข้อความทริกเกอร์จะลดลงเพื่อระบุว่าข้อความนั้นมีการคลิก . สิ่งนี้ใช้ได้ดีใน Firefox และ Chrome แต่ใน IE8 ความทึบจะไม่เปลี่ยนแปลง ฉันได้ลองการตั้งค่า CSS ที่หลากหลายโดยไม่ประสบความสำเร็จ ตัวอย่างเช่น HTML: <h3 class="slidedownTrigger">This is the trigger text</h3> CSS: .slidedownTrigger { cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; filter: alpha(opacity=75); -khtml-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } การหยุด IE เปลี่ยนความทึบคืออะไร หมายเหตุ: ฉันได้ลองสิ่งนี้กับองค์ประกอบที่แตกต่างหลากหลายสลับไปตามลำดับของคำสั่ง CSS และใช้ IE ด้วยตัวเอง ฉันก็ลองใช้ดู …

143 css  internet-explorer-8  opacity 

ตามที่เป็นอยู่ในปัจจุบันคำถามนี้ไม่เหมาะสำหรับรูปแบบคำถาม & คำตอบของเรา เราคาดหวังคำตอบที่จะได้รับการสนับสนุนจากข้อเท็จจริงการอ้างอิงหรือความเชี่ยวชาญ แต่คำถามนี้อาจเรียกร้องให้มีการอภิปรายโต้แย้งโต้แย้งหรือการอภิปรายเพิ่มเติม หากคุณรู้สึกว่าคำถามนี้สามารถปรับปรุงและเปิดใหม่ได้โปรดไปที่ศูนย์ช่วยเหลือเพื่อขอคำแนะนำ ปิดให้บริการใน7 ปีที่ผ่านมา Firebug เป็นเครื่องมือที่สะดวกที่สุดที่ฉันพบในการแก้ไข CSS ดังนั้นทำไมไม่มีตัวเลือก "บันทึก" แบบง่าย ๆ สำหรับ CSS ฉันมักจะพบว่าตัวเองทำ tweaks ใน Firebug จากนั้นกลับไปที่ไฟล์. css ดั้งเดิมของฉันและจำลอง tweaks มีใครคิดวิธีแก้ปัญหาที่ดีกว่าบ้างไหม? แก้ไข:ฉันรู้ว่ารหัสจะถูกเก็บไว้ในเซิร์ฟเวอร์ (ในกรณีส่วนใหญ่ไม่ใช่ของฉันเอง) แต่ฉันใช้มันเมื่อสร้างเว็บไซต์ของตัวเอง Firebug เพิ่งใช้ไฟล์. css ที่ Firefox ดาวน์โหลดจากเซิร์ฟเวอร์มันรู้ได้อย่างแม่นยำว่าบรรทัดไหนที่ไฟล์กำลังแก้ไข ฉันไม่เห็นสาเหตุที่ไม่มีตัวเลือก "ส่งออก" หรือ "บันทึก" ซึ่งช่วยให้คุณเก็บไฟล์. css ใหม่ได้ (ซึ่งฉันสามารถแทนที่รีโมทด้วย) ฉันได้ลองค้นหาสถานที่ชั่วคราวแล้วเลือกไฟล์ > บันทึก ...และทดลองใช้ตัวเลือกการแสดงผลบน Firefox แต่ฉันยังไม่พบวิธี แก้ไข …

143 css  firebug 

สไตล์ชีทผู้ใช้ตัวแทนสำหรับ Chrome ให้รัศมีเส้นขอบ 5px กับทุกมุมของ<select>องค์ประกอบ ฉันพยายามกำจัดสิ่งนี้โดยใช้รัศมี 0px ผ่านสไตล์ชีทภายนอกของฉันรวมทั้งอินไลน์องค์ประกอบเอง ฉันได้ลองทั้งคู่border-radius:0pxแล้ว-webkit-border-radius:0px;และฉันก็พยายามที่เฉพาะเจาะจงกว่านี้border-top-left-radius:0px(รวมถึง -webkit ที่เทียบเท่า) ไม่มีใครทำงาน เมื่อฉันตรวจสอบองค์ประกอบในเครื่องมือสำหรับนักพัฒนาของ webkit สไตล์การคำนวณยังคงแสดงรัศมีเป็น 5px แต่ถ้าฉันคลิกที่ลูกศรขยายถัดจากมันเพื่อดูเฉพาะมันอ่าน: element.style - 0px และด้านล่างนั้นจะแสดงข้อกำหนด css ภายนอกที่ฉันได้รับจาก 0px พร้อมกับข้อกำหนดสไตล์ชีทของผู้ใช้ - เอเจนต์ที่ 5px และทั้งสองหลังนี้ถูกขีดฆ่าอย่างที่ควรจะเป็น ความคิดใด ๆ

143 select  webkit  css 

สิ่งที่ฉันต้องการคือการให้พื้นหลังสีเขียวอยู่หลังข้อความไม่ใช่ความกว้างของหน้า 100% นี่คือรหัสปัจจุบันของฉัน: h1 { text-align: center; background-color: green; } <h1>The Last Will and Testament of Eric Jones</h1> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

143 html  css 

วิธีการเน้น / เลือกเนื้อหาของแท็ก DIV เมื่อผู้ใช้คลิกที่ DIV ... แนวคิดก็คือข้อความทั้งหมดจะถูกเน้น / เลือกดังนั้นผู้ใช้จึงไม่จำเป็นต้องไฮไลต์ข้อความด้วยเมาส์ด้วยตนเองและอาจ พลาดข้อความไปหน่อย? ตัวอย่างเช่นสมมติว่าเรามี DIV ดังต่อไปนี้: <div id="selectable">http://example.com/page.htm</div> ... และเมื่อผู้ใช้คลิกที่ URL ใด ๆ ข้อความ URL ทั้งหมดจะถูกไฮไลต์เพื่อให้สามารถลากข้อความที่เลือกไปรอบ ๆ ในเบราว์เซอร์ได้อย่างง่ายดายหรือคัดลอก URL ที่สมบูรณ์ด้วยการคลิกขวา ขอบคุณ!

143 javascript  css 

นี่คือสิ่งที่ฉันพยายามทำให้สำเร็จใน HTML / CSS: ฉันมีรูปภาพที่มีความสูงและความกว้างต่างกัน แต่ทั้งหมดมีขนาดไม่เกิน 180x235 ดังนั้นสิ่งที่ฉันต้องการทำคือสร้างdivด้วยborderและvertical-align: middleทั้งหมด ฉันได้ทำสำเร็จว่า แต่ตอนนี้ผมติดอยู่กับวิธีการที่จะต้องมีการเชื่อมโยง href divทั้งหมด นี่คือรหัสของฉัน: <div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;"> <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;"> <img src="myimage.jpg" height="62" width="180"> </div> </div> โปรดทราบว่าเพื่อประโยชน์ในการคัดลอกวางที่นี่ได้อย่างง่ายดายโค้ดสไตล์จะอยู่ในบรรทัด ฉันอ่านที่ไหนสักแห่งที่ฉันสามารถเพิ่ม div พาเรนต์อื่นที่ด้านบนของโค้ดแล้วทำ href ข้างในนั้น อย่างไรก็ตามจากการวิจัยบางส่วนพบว่าไม่ใช่รหัสที่ถูกต้อง ดังนั้นเพื่อสรุปอีกครั้งฉันต้องการ div ( #parentdivimage) ทั้งหมดเพื่อเป็นลิงก์ href

143 html  css 

ฉันต้องการใช้ css บางส่วนสำหรับองค์ประกอบอินพุตและฉันต้องการทำเช่นนั้นเฉพาะกับอินพุตที่ไม่ได้ปิดใช้งานและไม่ใช่ประเภทการส่งด้านล่าง css ไม่ทำงานบางทีถ้ามีใครสามารถอธิบายฉันได้ว่าจะต้องเพิ่มสิ่งนี้อย่างไร input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; }

143 css  css-selectors  pseudo-class 

วิธีที่ถูกต้องในbootstrapการลอย div ไปทางขวาคืออะไร? ฉันคิดว่าpull-rightเป็นวิธีการแนะนำ แต่มันไม่ทำงาน @import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .container { margin-top: 10px; } <div class="container"> <div class="row-fluid"> <div class="span6"> <p>Text left</p> </div> <div class="span6 pull-right"> <p>text right</p> </div> </div> </div> เรียกใช้ข้อมูลโค้ดHide resultsขยายตัวอย่างข้อมูล

142 html  css  twitter-bootstrap 

ฉันค้นหาคำถามอื่นแล้วและในขณะที่ปัญหานี้ดูเหมือนกับคำถามอื่น ๆ อีกสองเรื่อง แต่ฉันก็ยังไม่เห็นอะไรเลยที่จะจัดการกับปัญหาที่ฉันมีอยู่ ฉันมี div ที่มี div อื่น ๆ อยู่จำนวนหนึ่งซึ่งแต่ละอันจะถูกปล่อยให้ลอย div เหล่านี้แต่ละคนมีภาพถ่ายและคำอธิบาย สิ่งที่ฉันต้องการคือให้กลุ่มภาพถ่ายอยู่กึ่งกลางภายใน div ที่มี อย่างที่คุณเห็นจากโค้ดด้านล่างฉันลองใช้ทั้งคู่overflow:hiddenและmargin:x autoบน div parent แล้วและฉันก็เพิ่ม a clear:both(ตามที่แนะนำในหัวข้ออื่น) หลังจากรูปถ่าย ดูเหมือนจะไม่มีอะไรสร้างความแตกต่าง ขอบคุณ. ฉันขอขอบคุณข้อเสนอแนะใด ๆ <div style="position: relative; margin: 0 auto; overflow: hidden; text-align: center;"> <h4>Section Header</h4> <div style="margin: 2em auto;"> <div style="float: left; margin: auto 1.5em;"> …

142 html  center  css 

scriptองค์ประกอบที่ได้ตั้งตัวเป็นdisplay:blockปรากฏที่มองเห็นได้ ทำไมจึงเป็นไปได้และมีกรณีการใช้งานจริงที่ต้องการ? td > * { display: block; } <table> <tr> <td> <script type="text/javascript"> var test = 1; </script>von 1 </td> </tr> </table> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล

142 html  css  script-tag 

ฉันมีภาพที่ลิงค์นี้: http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg อย่างที่คุณเห็นนี่เป็นภาพปกติที่มีการวางแนวที่ถูกต้อง อย่างไรก็ตามเมื่อฉันตั้งค่าลิงค์นี้เป็น src attribute ของแท็กรูปภาพของฉันรูปภาพจะกลับหัว http://jsfiddle.net/7j5xJ/ <img src="http://d38daqc8ucuvuv.cloudfront.net/avatars/216/2014-02-19%2017.13.48.jpg" width="200"/> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล คุณมีความคิดว่าเกิดอะไรขึ้น?

142 html  css  image 

ฉันพยายามที่จะได้รับหลายinlineและส่วนประกอบในแนวตั้งในinline-block divทำไมspanในตัวอย่างนี้ถึงยืนยันว่าถูกผลักลงมา? ฉันได้พยายามทั้งสองvertical-align:middle;และvertical-align:top;แต่ไม่มีอะไรเปลี่ยนแปลง HTML: <div> <a></a><a></a> <span>Some text</span> </div>​ CSS: a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } ผลลัพธ์: ซอ

142 html  css  vertical-alignment 

ฉันมี CSS ที่เปลี่ยนการจัดรูปแบบเมื่อคุณวางเมาส์ไว้เหนือองค์ประกอบ HTML: <div class="test"> blah </div> CSS: .test:hover { border: 1px solid red; } ในบางกรณีฉันไม่ต้องการใช้ CSS กับโฮเวอร์ วิธีหนึ่งที่จะเพียงแค่ลบคลาส CSS จาก div โดยใช้ jQuery แต่นั่นจะทำลายสิ่งอื่น ๆ เนื่องจากฉันยังใช้คลาสนั้นเพื่อจัดรูปแบบองค์ประกอบย่อย ดังนั้นสิ่งที่ทำให้ฉันถาม: มีวิธีลบ 'hover' css สไตล์จากองค์ประกอบหรือไม่

142 html  css