কেবল সিএসএস ব্যবহার করে <a> উপরের হোভারে ডিভ দেখান

Question

যখন কেউ একটি <a>এলিমেন্টের উপরে চলে যায় তখন আমি একটি ডিভি প্রদর্শন করতে চাই , তবে আমি জাভাস্ক্রিপ্ট না করে সিএসএসে এটি করতে চাই। আপনি কি জানেন যে এটি কীভাবে অর্জন করা যায়?

Comments

— বিভাজনটি

দয়া করে দেখুন stackoverflow.com/questions/3847568/... যখন আপনাকে খুঁজে যে এই কৌশল বলে মনে হয় 'ভাঙ্গা'

— ঘ -_- খ

মনে রাখবেন: হোভার টাচ স্ক্রিনে একইভাবে কাজ করবে না এবং এই দিনগুলিতে এটি সতর্কতার সাথে ব্যবহার করা উচিত (উদাহরণস্বরূপ অতিরিক্ত নেভিগেশন উপাদানগুলি প্রদর্শন করতে এড়ানো)

— পাউয়ে বুলওয়ান

ক্লিক (থেকে বিষয়বস্তু দেখানোর জন্য লক্ষ্য পরামর্শ:, "+" CSS নির্বাচনকারী এখান থেকে পরামর্শ একটি সঙ্গে: "হোভার" @Pawel Bulwan আমি মিলিত stackoverflow.com/questions/18849520/... একটি সমাধান মধ্যে) উভয় মাউস দিয়ে কাজ করা উচিত এবং স্পর্শ - zoomicon.wordpress.com/2017/11/25/…

— জর্জ বীরবিলিস

আমার শেষ মন্তব্যে অনুসরণ করে, সেই ব্লগ পোস্টে আমি করা মন্তব্যের জবাবে কিছু দরকারী প্রকরণটি দেখুন: zoomicon.wordpress.com/2017/11/25/…

— জর্জ বীরবিলিস

Answer 1

আপনি ভালো কিছু করতে পারেন এই :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

এটি সংলগ্ন ভাইবোন নির্বাচক ব্যবহার করে এবং এটি স্তন্যপায়ী ড্রপডাউন মেনুর ভিত্তি ।

এইচটিএমএল 5 অ্যাঙ্কর উপাদানগুলিকে প্রায় কোনও কিছু মোড়ানোর অনুমতি দেয়, তাই সেক্ষেত্রে divউপাদানটিকে অ্যাঙ্করের সন্তান হিসাবে তৈরি করা যায়। অন্যথায় নীতিটি একই - অন্য উপাদানটির সম্পত্তি :hoverপরিবর্তন করতে সিউডো-শ্রেণি ব্যবহার করুন display।

Comments

ডিভ: হোভার {ডিসপ্লে: ব্লক; put রাখলেও দুর্দান্ত সমাধান, আপনি ডিভ নিজেই হোভার করলে ডিভ লুকানো হবে না ..

— আল্পার

এটি <div>পৃষ্ঠায় প্রতিটি তৈরি করবে display:noneএবং যখন মাউস "আমার উপরে উঠুন!" এটি প্রতিটি পিতামাতার অভ্যন্তরে <div>নিম্নলিখিতগুলি তৈরি করবে । এটি বা দ্বারা নির্বাচন করা আরও ভাল ধারণা হতে পারে । অন্যথায়, ভাল পোস্ট। <a>display:block.class-name#id

— নট

যোগ ডিভ: হোভার {প্রদর্শন: ব্লক; mouse তাদের মাউসটি শেষ হওয়ার সময় এটিকে বাইরে রাখতে

— বানরহাউস

প্রদর্শনের পরিবর্তে দৃশ্যমানতা ব্যবহার করা বুদ্ধিমানের কাজ হতে পারে। আমার মনে আছে, এটি আরও কার্যকর কারণ প্রদর্শনটি প্রতিবারই ডিভিড রেড করে। যদিও এটি সম্ভবত একটি ডিভের পক্ষে গুরুত্বপূর্ণ নয়, যদি আপনাকে অনেক কিছু করতে হয় তবে পরিবর্তে সেগুলি অদৃশ্য করা আরও ভাল।

— প্রিন্সিগ

@ ইয়ি জিয়াং - উত্তরে আপনি এই কোডটি কীভাবে যুক্ত করলেন?

— মোহাম্মদ জমির

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

যেহেতু এই উত্তরটি জনপ্রিয় তাই আমি মনে করি একটি ছোট ব্যাখ্যা প্রয়োজন। আপনি যখন অভ্যন্তরীণ উপাদানটি নিয়ে ঘুরে দেখেন তখন এই পদ্ধতিটি ব্যবহার করে এটি অদৃশ্য হয়ে যাবে। কারণ .শোমে ভিতরে রয়েছে। আপনি যখন মাউসটিকে দুটি লাইনের পাঠ্য (বা যা কিছু হোক না কেন) এর মধ্যে সরিয়ে দিলে তা অদৃশ্য হবে না।

এগুলি আপনার এমন আচরণের বাস্তবায়নের সময় যত্ন নেওয়া উচিত এমন কেরিকের উদাহরণ।

এটি আপনার নির্ভর করে যা নির্ভর করে। এই পদ্ধতিটি মেনু শৈলীর দৃশ্যের জন্য আরও ভাল, অন্যদিকে ইয়ি জিয়াংয়ের সরঞ্জামদণ্ডগুলির জন্য আরও ভাল।

Comments

আপনি এইচটিএমএল 5 ব্যবহার না করে আপনি ইনলাইন উপাদানের ভিতরে ব্লক উপাদান রাখতে পারবেন না

— মিথাইল

এইচটিএমএল 5 এখনও এটি স্ট্যান্ডার্ড নয়, তাই ইয়ি জিয়াংয়ের পদ্ধতিটি আরও ভাল।

— মিথাইল

আমি এটি আরও ভাল জানি, কেন আমি এটিকে উজ্জীবিত করেছি :) আমি একটি কার্যকরী উদাহরণ দিয়েছি, একটি ধারণা উপস্থাপন করেছি (সিএসএস নির্বাচকরা আরও নির্দিষ্টভাবে), কেন তা নিচে নামাবেন তা দেখুন না ^^

— n00b

এটি ব্যবহার করা আরও ভাল হতে পারে <span>তবে আমি মনে করি এটি জি জিয়াংয়ের চেয়ে ভাল উদাহরণ।

— নাট

Answer 3

আমি দেখতে পেয়েছি যে অস্বচ্ছতা ব্যবহার করা আরও ভাল, এটি আপনাকে একটি দুর্দান্ত সমাপ্ত হোভার ইফেক্ট তৈরি করতে CSS3 ট্রানজিশন যুক্ত করতে দেয় । পুরানো IE ব্রাউজারগুলি দ্বারা কেবল স্থানান্তরগুলি বাদ দেওয়া হবে, সুতরাং এটি কৃপণভাবে হ্রাস করে।

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Comments

এটি দুর্দান্ত, আমি এটি অনেক বড় ডিভের জন্য ব্যবহার করেছি। আমি "জিনিস" DIV আছে থেকে "হোভার" DIV আছে আমার কার্সার সরানো তাই আমি গত শৈলী উপাদান পরিবর্তিত "জিনিস" DIV আছে দৃশ্যমান থাকে চেয়েছিলেন #hover:hover + #stuff {করতে #hover:hover + #stuff, #stuff:hover {। তারপরে যখন আপনি সেই ডিভের উপরে চলে যান তখন "স্টাফ" ডিভিটি দৃশ্যমান থাকে!

— নটজে

ধন্যবাদ, ঠিক এই আমি চেয়েছিলাম, সামনে একটি দুর্দান্ত দিন ...

— fahd4007

Answer 4

আমি জানি একজন বিশেষজ্ঞের অর্থ, তবে এই কোডটি সম্পর্কে কিছু কাজ করার জন্য আমি নিজেকে অবিশ্বাস্যভাবে গর্বিত। যদি তুমি করো:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

('>' নোট করুন) আপনি কোনও ট্যাগটিতে পুরো জিনিসটি ধারণ করতে পারেন, ততক্ষণ আপনি যতক্ষণ না আপনার ট্রিগার (যা এটি নিজস্ব ডিভের মধ্যে থাকতে পারে, বা কোনও ট্যাগে সোজা আপ করতে পারেন) বা যা কিছু আপনি চান শারীরিকভাবে স্পর্শ করছে প্রকাশিত ডিভ, আপনি নিজের মাউসটিকে অন্য থেকে অন্যটিতে সরিয়ে নিতে পারেন।

হতে পারে এটি দুর্দান্ত ব্যবহারের জন্য কার্যকর নয়, তবে আমার প্রকাশিত ডিভিটি ওভারফ্লোতে সেট করতে হয়েছিল: অটো, তাই কখনও কখনও এটির স্ক্রোল বার থাকে, যা আপনি ডিভ থেকে সরে যাওয়ার সাথে সাথে ব্যবহার করা যায় না।

প্রকৃতপক্ষে, প্রকাশিত ডিভটি কীভাবে তৈরি করা যায় তা শেষপর্যন্ত কাজ করার পরে (যদিও এটি এখন ভাই-বোন নয়, ট্রিগারটির সন্তান), জেড-ইনডেক্সের বিচারে, ট্রিগারটির পিছনে বসে থাকুন (এই পৃষ্ঠা থেকে কিছুটা সহায়তা নিয়ে : সন্তানের উপরে উপস্থিত হওয়ার জন্য পিতামাতার উপাদানটি কীভাবে পাবেন ) আপনাকে এটিকে স্ক্রোল করার জন্য প্রকাশিত ডিভের উপরেও রোল করতে হবে না, কেবল ট্রিগারটির উপর ঘুরে বেড়াতে থাকুন এবং আপনার চাকা বা যা কিছু ব্যবহার করুন।

আমার প্রকাশিত ডিভ পৃষ্ঠার বেশিরভাগ অংশকে কভার করে, সুতরাং মাউসের প্রতিটি পদক্ষেপের সাথে স্ক্রিনটি এক রাজ্য থেকে অন্য রাজ্যে ঝলকানোর চেয়ে এই কৌশলটি অনেক বেশি স্থায়ী করে তোলে। এটি আসলেই স্বজ্ঞাত, তাই কেন আমি নিজেকে নিয়ে সত্যিই বেশ গর্বিত।

একমাত্র ক্ষতি হ'ল আপনি পুরো জিনিসটির মধ্যে লিঙ্ক স্থাপন করতে পারবেন না তবে আপনি পুরো জিনিসটিকে একটি বড় লিঙ্ক হিসাবে ব্যবহার করতে পারেন।

Answer 5

এই উত্তরের প্রয়োজন হয় না যে আপনি কী ধরণের প্রদর্শন (ইনলাইন ইত্যাদি) আড়ালযোগ্য উপাদানটি যখন দেখানো হচ্ছে তখন অনুমান করা উচিত:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

এটি সংলগ্ন ভাইবোন নির্বাচনকারী এবং না নির্বাচক ব্যবহার করে ।

Answer 6

আমি এই সাধারণ উদ্দেশ্যে টেমপ্লেট সমাধানটি দিতে চাই যা ই জিয়াং এর সরবরাহিত সঠিক সমাধানটির প্রসারণ করবে।

অতিরিক্ত সুবিধার মধ্যে রয়েছে:

• যে কোনও উপাদান ধরণের বা একাধিক উপাদানকে কেন্দ্র করে সহায়তা করা;
• পপআপ কোনও উপাদান টাইপ বা উপাদানের সেট হতে পারে, অবজেক্ট সহ;
• স্ব-ডকুমেন্টিং কোড;
• অন্যান্য উপাদানগুলির উপরে পপ-আপ উপস্থিতি নিশ্চিত করে;
• আপনি যদি কোনও ডাটাবেস থেকে এইচটিএমএল কোড তৈরি করছেন তবে তা অনুসরণ করার একটি শব্দের ভিত্তি।

এইচটিএমএলে আপনি নিম্নলিখিত কাঠামোটি রাখুন:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

সিএসএসে আপনি নিম্নলিখিত কাঠামোটি রাখুন:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

কয়েকটি বিষয় লক্ষণীয়:

1. কারণ ডিভপপআপের অবস্থানটি স্থির করে দেওয়া হয়েছে (এটিও নিখুঁতভাবে কাজ করবে) বিষয়বস্তু নথির স্বাভাবিক প্রবাহের মধ্যে নেই যা দৃশ্যমান বৈশিষ্ট্যটি ভালভাবে কাজ করতে দেয়।
2. ডি-পপআপটি অন্য পৃষ্ঠার উপাদানগুলির উপরে উপস্থিত রয়েছে তা নিশ্চিত করার জন্য জেড-ইনডেক্স সেট করা আছে।
3. তথ্য_পপআপ_সামগ্রী একটি ছোট আকারে সেট করা আছে এবং এভাবে overedুকতে পারে না।
4. এই কোডটি কেবল বিভক্তকরণ সূত্রের উপর নির্ভর করে। বিভক্তকরণ এবং Div.popup উভয়কেই ধরে রেখে সহায়তা করার জন্য নীচে নীচে পপআপের উপর হওর দেখুন।
5. এটি পরীক্ষা করা হয়েছে এবং অপেরা 12.16 ইন্টারনেট এক্সপ্লোরার 10.0.9200, ফায়ারফক্স 18.0 এবং গুগল ক্রোম 28.0.15 তে প্রত্যাশা অনুযায়ী কাজ করেছে।

পপআপ উপর ঘোরা

অতিরিক্ত তথ্য হিসাবে। যখন পপআপে এমন তথ্য থাকে যা আপনি কাটা এবং পেস্ট করতে চাইতে পারেন বা কোনও অবজেক্টের সাথে থাকতে পারে যা আপনি প্রথমে প্রতিস্থাপন করতে চান তবে প্রতিস্থাপন করুন:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

সঙ্গে

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

এবং দ্বিতীয়ত, ডিভ.পপআপের অবস্থানটি সামঞ্জস্য করুন যাতে ডিভ.আইনফর্মেশনের সাথে ওভারল্যাপ থাকে। ডিভ.পোপ্প্পশনটি কিউভারকে বিভাজনে রূপান্তরিত করার সময় হোভারটি পেতে পারে তা নিশ্চিত করার জন্য কয়েকটি পিক্সেলই যথেষ্ট।

এটি ইন্টারনেট এক্সপ্লোরার 10.0.9200 এর সাথে প্রত্যাশার মতো কাজ করে না এবং অপেরা 12.16, ফায়ারফক্স 18.0 এবং গুগল ক্রোম 28.0.15 এর সাথে প্রত্যাশা অনুযায়ী কাজ করে।

একটি পপআপ মাল্টিলেভেল মেনু সহ সম্পূর্ণ উদাহরণের জন্য fizz দেখুন http://jsfiddle.net/F68Le/ ।

Answer 7

দয়া করে এই কোডটি পরীক্ষা করুন

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

Answer 8

+মঞ্জুরি দেয় কেবল 'প্রথমে' নেস্টেড উপাদান নয়, >কেবলমাত্র নেস্টেড এলিমেন্টগুলিই বেছে নিন - ব্যবহার করা ভাল ~ar অস্বচ্ছতা / প্রস্থ এবং রূপান্তর ব্যবহার করে আপনি মসৃণ উপস্থিতি সরবরাহ করতে পারেন

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Answer 9

আমার জন্য, যদি আমি প্রতিটি বার ট্রিগার উপাদানটি ছাড়াই না দেখি তবে লুকানো ডিভের সাথে যোগাযোগ করতে চাই (সেই ক্ষেত্রে) আমি অবশ্যই যুক্ত করব:

div:hover {
    display: block;
}

Answer 10

মূল উত্তরের ভিত্তিতে, এটি একটি উদাহরণ, ?কোনও লিঙ্কের নিকটে ক্লিক করার সময় একটি তথ্য সরঞ্জামদণ্ড প্রদর্শন করতে দরকারী :

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Answer 11

এই সিএসএস ব্যবহার করে আমার পরীক্ষা থেকে:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

এবং এই এইচটিএমএল:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, এর ফলে এটি দ্বিতীয়টি ব্যবহার করে প্রসারিত হয়, তবে প্রথমটি ব্যবহার করে প্রসারিত হয় না। সুতরাং যদি হোভার টার্গেট এবং লুকানো ডিভের মধ্যে কোনও ডিভ থাকে, তবে এটি কার্যকর হবে না।

Answer 12

এইচটিএমএল

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

সিএসএস

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

কোডপেন: অন্য বিভাগে ডিভি শো শোতে টানুন

Answer 13

ভুলে যাবেন না যদি আপনি কোনও চিত্রের চারদিকে ঘোরাফেরা করার চেষ্টা করছেন তবে আপনাকে এটি একটি ধারকের চারপাশে রাখতে হবে। CSS:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

আপনি যদি এটিকে ঘুরে দেখেন:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

এটি প্রদর্শিত হবে:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>