আমার একটি চিত্র উপাদান রয়েছে যা আমি ক্লিক করে পরিবর্তন করতে চাই।
<img id="btnLeft">এইটা কাজ করে:
#btnLeft:hover {
width:70px;
height:74px;
}
তবে আমার যা দরকার তা হ'ল:
#btnLeft:onclick {
width:70px;
height:74px;
}
তবে, এটি কার্যকরভাবে কাজ করে না। onclickসিএসএসে (যেমন জাভাস্ক্রিপ্ট ব্যবহার না করে) আচরণ করা কি আদৌ সম্ভব ?
:targetনির্বাচকদের কাছে এটি নতুন নয় 4.. এটি নির্বাচক ৩ থেকে পাওয়া যায় যা লেখার সময় ইতিমধ্যে এক বছরের জন্য সুপারিশ ছিল।
উত্তর:
আপনি যে নিকটতম পাবেন তা হ'ল :active:
#btnLeft:active {
width: 70px;
height: 74px;
}
তবে মাউস বোতামটি চেপে ধরে রাখলে এটি কেবল স্টাইলটি প্রয়োগ করবে। কোনও স্টাইল প্রয়োগ এবং অনক্লিক প্রয়োগ করার একমাত্র উপায় হ'ল কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করা।
চেকবাক্স হ্যাক ব্যবহার করে কেবলমাত্র সিএসএস ব্যবহার করে কোনও আসল ক্লিক ইভেন্ট সিমুলেট করার সর্বোত্তম উপায় (আসলে একমাত্র উপায় *) (কেবলমাত্র কোনও উপাদানকে ঘুরিয়ে দেওয়া বা কোনও উপাদানকে সক্রিয় করে তোলা ) না is এটি লেবেলের বৈশিষ্ট্যের মাধ্যমে labelকোনও <input type="checkbox">উপাদানকে সংযুক্ত করে কাজ করে for=""।
এই বৈশিষ্ট্যের ব্রড ব্রাউজার সমর্থন রয়েছে ( :checkedসিউডো-ক্লাসটি আই 9 +)।
একটি একই মান প্রয়োগ করুন <input>'র আইডি অ্যাট্রিবিউটে একটি প্রবন্ধসহ <label>এর for=""অ্যাট্রিবিউট, এবং আপনি পুনরায় শৈলী ব্রাউজার দিয়ে ক্লিক ট্যাগ বলতে পারেন :checkedসিউডো-বর্গ, আসলে ধন্যবাদ যে একটি লেবেল এ ক্লিক করলে চেক করবে এবং আনচেক "যুক্ত" <input type="checkbox">।
* আপনি এর মাধ্যমে একটি "নির্বাচিত হয়েছে" এই ইভেন্টের সিমুলেট করতে :activeবা :focus(ক বোতাম স্বাভাবিকভাবে যে জন্য যেমন IE7 + এ সিউডো-বর্গ 50pxচওড়া, আপনি তার প্রস্থ যখন পরিবর্তন করতে পারেন active: #btnControl:active { width: 75px; }), কিন্তু সেই সত্য নয় ঘটনা "এ ক্লিক করুন"। উপাদানটি নির্বাচিত হওয়ার পরে পুরো সময় তারা "লাইভ" থাকে (যেমন Tabআপনার কীবোর্ডের সাহায্যে বিং করে), যা সত্য ক্লিকের ইভেন্টের থেকে কিছুটা আলাদা, যা কোনও ক্রিয়াকলাপ চালায় - সাধারণত - mouseUp।
এখানে আমি আমার মার্কআপে ইনপুট দেওয়ার ঠিক পরে লেবেলটি অবস্থান করেছি। এটি এমন যে আমি তত্ক্ষণাত আমার চেকবাক্স অনুসরণ করে কেবলমাত্র লেবেলটি নির্বাচন করতে সংলগ্ন ভাইবোন নির্বাচক ( +কী) ব্যবহার করতে পারি #demo। যেহেতু :checkedসিউডো-ক্লাসটি চেকবাক্সে প্রযোজ্য তাই #demo:checked + labelকেবলমাত্র চেকবক্সটি চেক করা থাকলেই প্রযোজ্য।
#btnControl {
display: none;
}
#btnControl:checked + label > img {
width: 70px;
height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="http://placekitten.com/200/140" id="btnLeft" /></label>সঙ্গে যে সত্তার বলেন, হয় কিছু খারাপ খবর। যেহেতু একটি লেবেল কেবল একবারে একটি ফর্ম নিয়ন্ত্রণের সাথে যুক্ত হতে পারে , তার অর্থ আপনি <label></label>ট্যাগগুলির মধ্যে কেবল একটি বোতাম ফেলে দিতে পারেন না এবং একটি দিন কল করতে পারেন। যাইহোক, আমরা লেবেলটিকে চেহারা তৈরি করতে এবং কোনও HTML বোতামটি কীভাবে দেখায় এবং আচরণ করে তার থেকে মোটামুটিভাবে আচরণ করতে আমরা কিছু সিএসএস ব্যবহার করতে পারি ।
এই ডেমোতে বেশিরভাগ সিএসএস কেবল লেবেল উপাদানকে স্টাইল করার জন্য। যদি আপনার আসলে কোনও বোতামের প্রয়োজন না হয় এবং কোনও পুরানো উপাদানই পর্যাপ্ত হয়ে যায়, তবে আপনি উপরের আমার দ্বিতীয় ডেমোর মতো এই ডেমোতে প্রায় সমস্ত শৈলী সরাতে পারেন।
আপনি আরও খেয়াল করতে পারেন যে আমার সেখানে একটি উপসর্গযুক্ত সম্পত্তি আছে -moz-outline-radius,। কিছুক্ষণ আগে, মজিলা ফায়ারফক্সে এই বিস্ময়কর অ-নির্দিষ্ট বৈশিষ্ট্য যুক্ত করেছে, তবে ওয়েবকিতের লোকেরা সিদ্ধান্ত নিয়েছে যে তারা দুর্ভাগ্যক্রমে এটি যুক্ত করতে যাচ্ছেনা। সুতরাং সিএসএসের সেই লাইনটি ফায়ারফক্স ব্যবহারকারীদের জন্য কেবল একটি প্রগতিশীল বর্ধন বিবেচনা করুন।
:checked।
আপনি :targetক্লিক ইভেন্টের নকল করতে সিউডো ক্লাস ব্যবহার করতে পারেন , আমাকে একটি উদাহরণ দিন।
#something {
display: none;
}
#something:target {
display: block;
}<a href="#something">Show</a>
<div id="something">Bingo!</div>এটি দেখতে কেমন দেখাচ্ছে তা এখানে: http://jsfiddle.net/TYhnb/
একটি বিষয় লক্ষণীয়, এটি কেবল হাইপারলিংকের মধ্যেই সীমাবদ্ধ, সুতরাং যদি আপনাকে হাইপারলিংক, যেমন একটি বোতামের মতো অন্য কোনও ব্যবহারের প্রয়োজন হয় তবে আপনি এটিকে কিছুটা হ্যাক করতে চাইতে পারেন, যেমন একটি বোতামের মতো দেখতে হাইপারলিঙ্ককে স্টাইল করা।
আপনি যদি উপাদানটিকে একটি দেন tabindexতবে আপনি :focusক্লিকের অনুকরণের জন্য সিউডো ক্লাসটি ব্যবহার করতে পারেন ।
এইচটিএমএল
<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />সিএসএস
#btnLeft:focus{
width:70px;
height:74px;
}tabindex=-1আইটেমটি ব্যবহার করেন তখনও ফোকাসযোগ্য, তবে কেবল মাউস দ্বারা, কীবোর্ড নয়, যা এই ক্ষেত্রে আরও ভাল। আপনি outline:0যখন মনোনিবেশ করেন তখন নীল সীমানা মুছে ফেলার জন্য কোনও স্টাইলও ব্যবহার করতে পারেন
সম্পাদনা: ওপি সে কী চায় তা পরিষ্কার করার আগে উত্তর দিয়েছিল। নীচে জাভাস্ক্রিপ্ট অনক্লিকের অনুরূপ একটি অনক্লিকের জন্য, :activeসিউডো ক্লাস নয়।
এটি কেবল জাভাস্ক্রিপ্ট বা চেকবক্স হ্যাক উভয় দিয়েই অর্জন করা যেতে পারে
চেকবাক্স হ্যাকটি মূলত আপনাকে একটি লেবেলে ক্লিক করতে দেয়, এটি একটি চেকবক্সকে "চেক করে" দেয়, যাতে আপনি নিজের ইচ্ছে মতো লেবেলটি স্টাইল করতে পারবেন।
idএগুলিকে একত্রে আবদ্ধ করতে আপনাকে ব্যবহার করতে হবে না ।
টাইলারহহ একটি সত্যিই ভাল উত্তর দিয়েছে, এবং আমাকে কেবল শেষ বোতামটির সংস্করণটিকে একটি আপডেট দিতে হয়েছিল।
#btnControl {
display: none;
}
.btn {
width: 60px;
height: 30px;
background: silver;
border-radius: 5px;
padding: 1px 3px;
box-shadow: 1px 1px 1px #000;
display: block;
text-align: center;
background-image: linear-gradient(to bottom, #f4f5f5, #dfdddd);
font-family: arial;
font-size: 12px;
line-height:30px;
}
.btn:hover {
background-image: linear-gradient(to bottom, #c3e3fa, #a5defb);
}
.btn:active {
margin: 1px 1px 0;
box-shadow: -1px -1px 1px #000;
background-image: linear-gradient(to top, #f4f5f5, #dfdddd);
}
#btnControl:checked + label {
width: 70px;
height: 74px;
line-height: 74px;
}<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl">Click me!</label>হ্যাকি না হয়ে খাঁটি সিএসএস সমাধান সম্পর্কে কীভাবে?
.page {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #121519;
color: whitesmoke;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.arrow {
cursor: pointer;
transition: filter 0.3s ease 0.3s;
}
.arrow:active {
filter: drop-shadow(0 0 0 steelblue);
transition: filter 0s;
}<body class="page">
<div class="controls">
<div class="arrow">
<img src="https://i.imgur.com/JGUoNfS.png" />
</div>
</div>
</body>@TylerH এর দুর্দান্ত প্রতিক্রিয়া রয়েছে তবে এটি একটি জটিল জটিল সমাধান। আপনারা তাদের জন্য আমার একটি সমাধান আছে যা কেবলমাত্র অতিরিক্ত উপাদানগুলির গুচ্ছ ছাড়াই খাঁটি সিএসএসের সাথে একটি সাধারণ "অনক্লিক" প্রভাব চাই।
আমরা কেবল সিএসএস রূপান্তর ব্যবহার করব। আপনি সম্ভবত অ্যানিমেশন সহ একই কাজ করতে পারে।
কৌশলটি হ'ল সংক্রমণের জন্য বিলম্ব পরিবর্তন করা যাতে ব্যবহারকারী ক্লিক করলে এটি স্থায়ী হয়।
.arrowDownContainer:active,
.arrowDownContainer.clicked {
filter: drop-shadow(0px 0px 0px steelblue);
transition: filter 0s;
}এখানে আমি "ক্লিক করা" শ্রেণিটি পাশাপাশি যুক্ত করি যাতে প্রয়োজন হলে জাভাস্ক্রিপ্টও প্রভাব সরবরাহ করতে পারে। আমি 0 পিএক্স ড্রপ-শ্যাডো ফিল্টার ব্যবহার করি কারণ এটি আমার কেসের জন্য প্রদত্ত স্বচ্ছ গ্রাফিক নীলকে হাইলাইট করবে।
আমার এখানে 0 সেকেন্ডে একটি ফিল্টার রয়েছে যাতে এটি কার্যকর হয় না। যখন প্রভাবটি প্রকাশিত হয় আমি তখনই বিলম্বের সাথে সংক্রমণটি যুক্ত করতে পারি যাতে এটি একটি দুর্দান্ত "ক্লিক করা" প্রভাব সরবরাহ করে।
.arrowDownContainer {
cursor: pointer;
position: absolute;
bottom: 0px;
top: 490px;
left: 108px;
height: 222px;
width: 495px;
z-index: 3;
transition: filter 0.3s ease 0.3s;
}এটি আমাকে এটি সেট আপ করার অনুমতি দেয় যাতে ব্যবহারকারীর বোতামটি ক্লিক করার পরে এটি নীলকে হাইলাইট করে ধীরে ধীরে বিবর্ণ হয়ে যায় (আপনি অবশ্যই, অন্যান্য প্রভাবগুলিও ব্যবহার করতে পারেন)।
আপনি এখানে এই অর্থে সীমাবদ্ধ রয়েছেন যে হাইলাইট করার জন্য অ্যানিমেশনটি তাত্ক্ষণিক, এটি এখনও পছন্দসই প্রভাব সরবরাহ করে না। একটি মসৃণ সামগ্রিক রূপান্তর উত্পাদন করতে আপনি অ্যানিমেশন সহ এই কৌশলটি সম্ভবত ব্যবহার করতে পারেন।
ঠিক আছে, এটি সম্ভবত একটি পুরাতন পোস্ট ... তবে গুগলে প্রথম ফলাফল হয়েছিল এবং এটিতে নিজের মিশ্রণটি তৈরি করার সিদ্ধান্ত নিয়েছে ..
প্রথমত আমি ফোকাস ব্যবহার করব
এর কারণ হ'ল এটি আমি যে উদাহরণটি দেখছি তার জন্য এটি দুর্দান্তভাবে কাজ করে, যদি কেউ মাউস ডাউন টাইপ ইভেন্ট চায় তবে সক্রিয় ব্যবহার করুন
এইচটিএমএল কোড:
<button class="mdT mdI1" ></button>
<button class="mdT mdI2" ></button>
<button class="mdT mdI3" ></button>
<button class="mdT mdI4" ></button>সিএসএস কোড:
/* Change Button Size/Border/BG Color And Align To Middle */
.mdT {
width:96px;
height:96px;
border:0px;
outline:0;
vertical-align:middle;
background-color:#AAAAAA;
}
.mdT:focus {
width:256px;
height:256px;
}
/* Change Images Depending On Focus */
.mdI1 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img1'); }
.mdI1:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+1'); }
.mdI2 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img2'); }
.mdI2:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+2'); }
.mdI3 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img3'); }
.mdI3:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+3'); }
.mdI4 { background-image:url('http://placehold.it/96x96/AAAAAA&text=img4'); }
.mdI4:focus { background-image:url('http://placehold.it/256x256/555555&text=Image+4'); }জেএস ফিডল লিঙ্ক: http://jsfiddle.net/00wwkjux/
সুতরাং কেন আমি এটি একটি পুরানো থ্রেডে পোস্ট করছি, ভাল কারণ এখানে উদাহরণগুলি ভিন্ন হয় এবং আমি মনে করি যে এটি একটি কার্যকর উদাহরণ হিসাবে সম্প্রদায়কে একটি ফিরিয়ে দেবে।
থ্রেড স্রষ্টার দ্বারা ইতিমধ্যে উত্তর হিসাবে দেওয়া হয়েছে, তারা কেবল ক্লিক ইভেন্টের সময় প্রভাবটি টিকে থাকতে চায়। এখন যদিও এটি সেই প্রয়োজনের জন্য সঠিক নয়, তবে এটি বন্ধ। মাউস ডাউন থাকাকালীন সক্রিয় অ্যানিমেটেড হবে এবং জাভাস্ক্রিপ্টের মাধ্যমে আপনার শেষ মুহূর্তে থাকা কোনও পরিবর্তন করা দরকার।
সতর্কবাণী! বিশেষত সহজ উত্তর নীচে! :)
আপনার কাছে আসলে এমন পরিবর্তন থাকতে পারে যা অবিরত থাকে (যেমন কোনও ব্লক / পপআপ যা প্রদর্শিত হয় এবং ক্লিকের পরে দৃশ্যমান থাকে) কেবল মাত্র CSS (এবং চেকবক্স হ্যাক ব্যবহার না করে) সত্ত্বেও এখানে অনেকগুলি (অন্যথায় সঠিক) উত্তর দাবি করেও, যেমন আপনার কেবল হোভারের সময় অধ্যবসায় দরকার।
সুতরাং বোজ্যাঙ্গেলস এবং টাইলারএইচের উত্তরগুলি একবার দেখুন, যদি সেগুলি আপনার পক্ষে কাজ করে তবে আপনি যদি একটি সহজ এবং সিএসএসের একটি উত্তর চান যা ক্লিক করার পরে একটি ব্লক দৃশ্যমান থাকবে (এবং এমনকি ব্লকটিকে ফলোআপ ক্লিকের সাথে অদৃশ্য হয়ে যেতে পারে), এই সমাধান দেখুন।
আমার একই অবস্থা ছিল, আমার অনক্লিকের সাথে একটি পপআপ ডিভ দরকার ছিল যেখানে আমি কোনও জেএস যুক্ত করতে পারিনি বা মার্কআপ / এইচটিএমএল (সত্যিকারের সিএসএস সমাধান) পরিবর্তন করতে পারিনি এবং এটি কিছু সতর্কতার সাথে সম্ভব possible আপনি: টার্গেট ট্রিকটি ব্যবহার করতে পারবেন না যা আপনি HTML পরিবর্তন করতে না পারলে একটি দুর্দান্ত পপআপ তৈরি করতে পারে (কোনও 'আইডি যুক্ত করতে') তাই এটি বাইরে ছিল।
আমার ক্ষেত্রে পপআপ ডিভটি অন্য ডিভের অভ্যন্তরে অন্তর্ভুক্ত ছিল এবং আমি পপআপটি অন্য ডিভের উপরে উপস্থিত হতে চেয়েছিলাম এবং এটি: সক্রিয় এবং: হোভার: এর সংমিশ্রণে করা যেতে পারে:
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { display: block; }
/* And hold by staying visible on hover */
.info:hover {
display: block;
}
/* General settings for popup */
.info {
position: absolute;
top: -5;
display: none;
z-index: 100;
background-color: white;
width: 200px;
height: 200px;
}উদাহরণ (পাশাপাশি একটি যা পপআপ এ ক্লিক করে এটি অদৃশ্য করতে দেয়) এখানে:
http://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/
আমি নীচে একটি কোড স্নিপেট উদাহরণও sertedোকালাম, তবে স্ট্যাকওভারফ্লো স্যান্ডবক্সে অবস্থানটি অদ্ভুত তাই আমাকে অভ্যন্তরীণ ডিভের পরে 'এখানে ক্লিক করুন' পাঠ্য লিখতে হয়েছিল, যা সাধারণত প্রয়োজন হয় না।
/* Outer div - needs to be relative so we can use absolute positioning */
.clickToShowInfo {
position: relative;
}
/* When clicking outer div, make inner div visible */
.clickToShowInfo:active .info { visibility: visible; }
/* And hold by staying visible on hover */
.info:hover {
visibility: visible;
}
/* General settings for popup */
.info {
position: absolute;
top: -10;
visibility: hidden;
z-index: 100;
background-color: white;
box-shadow: 5px 5px 2px #aaa;
border: 1px solid grey;
padding: 8px;
width: 220px;
height: 200px;
}
/* If we want clicking on the popup to close, use this */
.info:active {
visibility: hidden; /* Doesn't work because DCEvent is :active as well */
height: 0px;
width: 0px;
left: -1000px;
top: -1000px;
}<p />
<div class="clickToShowInfo">
<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>
Click here to show info
</div>
<p />মাউস হোভার এবং মাউস ক্লিকের জন্য আমার কাছে নীচের কোড রয়েছে এবং এটি কাজ করে:
//For Mouse Hover
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
text-align:center;
vertical-align:middle;
height: 70%;
width: 80%;
top:auto;
left: 10%;
}এবং এই কোডটি ছবিতে ক্লিক করলে আপনি এটি লুকিয়ে রাখেন:
.thumbnail:active span {
visibility: hidden;
}আমার একটি উপাদানটির সাথে সমস্যা ছিল যা হভারের সময় রঙিন লাল রঙের হতে হবে এবং overedোকানোর সময় ক্লিকে ব্লু হতে হবে। সিএসএস দিয়ে এটি অর্জনের জন্য আপনার উদাহরণের প্রয়োজন:
h1:hover { color: red; }
h1:active { color: blue; }
<h1>This is a heading.</h1>আমি কিছু সময়ের জন্য লড়াই যতদিন না আমি আবিষ্কার করেছি যে অর্ডার CSS সিলেক্টর সমস্যা আমি চাপ ছিল ছিল। সমস্যাটি হ'ল আমি জায়গাগুলি স্যুইচ করেছি এবং সক্রিয় নির্বাচক কাজ করছে না। তারপরে আমি জানতে পারি যে আগে :hoverযেতে হবে এবং তারপরে :active।
আপনি ব্যবহার করতে পারেন: লক্ষ্য
সাধারণ লক্ষ্য জন্য
: টার্গেট
বা শ্রেণীর নাম অনুসারে ফিল্টার করুন
.classname: টার্গেট
বা আইডি নাম দ্বারা ফিল্টার
#idname: টার্গেট
<style>
#id01:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.msg{
display:none;
}
.close{
color:white;
width: 2rem;
height: 2rem;
background-color: black;
text-align:center;
margin:20px;
}
</style>
<a href="#id01">Open</a>
<div id="id01" class="msg">
<a href="" class="close">×</a>
<p>Some text. Some text. Some text.</p>
<p>Some text. Some text. Some text.</p>
</div>:targetতা ইতিমধ্যে পোস্ট করা হয়েছে, সুতরাং আর একটির প্রয়োজন নেই। তদুপরি, প্রশ্নকারী কীভাবে "অনক্লিক" প্রভাব রাখবে, অন্যান্য উপাদানগুলিকে প্রদর্শন / আড়াল না করে জিজ্ঞাসা করবে।
:activeমাউস ডাউন থাকাকালীন কাজ করে। আপনি যা করার চেষ্টা করছেন তার উপর নির্ভর করে আপনি CSS4 সিউডো-ক্লাস ব্যবহার করে এটিকে কাজ করতে সক্ষম হতে পারেন:target।